vue項(xiàng)目動(dòng)態(tài)渲染input,綁定的參數(shù)不實(shí)時(shí)更新問(wèn)題
vue動(dòng)態(tài)渲染input,綁定的參數(shù)不實(shí)時(shí)更新
遇到過(guò)一個(gè)問(wèn)題 按照需求 需要根據(jù)后端返回的list 渲染選項(xiàng)并將輸入的參數(shù)回傳
但是渲染后發(fā)現(xiàn)在輸入框輸入時(shí) 輸入框中沒(méi)有內(nèi)容 數(shù)據(jù)沒(méi)有進(jìn)行更新
在input中加一句 刷新數(shù)據(jù) 可解決該問(wèn)題
@input="$forceUpdate()"
<div v-if="doubleChild.lenght!=0&&radio === 1">
<template v-for="( item,index ) in doubleChild" >
<el-form-item :label="item.text" :key="index">
<el-input
@input="$forceUpdate()"
placeholder="請(qǐng)輸入內(nèi)容"
v-model="item.inputKey">
</el-input>
</el-form-item>
</template>
</div>
vue動(dòng)態(tài)渲染表格
項(xiàng)目場(chǎng)景
拼團(tuán)的后臺(tái)項(xiàng)目，項(xiàng)目中需要設(shè)置參團(tuán)的sku，也就是所開(kāi)的這個(gè)團(tuán)是幾人的團(tuán)，開(kāi)團(tuán)的人數(shù)不同，價(jià)格也就不同。
所以需要?jiǎng)討B(tài)渲染個(gè)表格的列，如下圖中2人團(tuán)價(jià)格以及3人團(tuán)價(jià)格表頭
需求描述
當(dāng)后臺(tái)管理員選擇開(kāi)團(tuán)的類(lèi)型后，所關(guān)聯(lián)的參團(tuán)商品設(shè)置sku時(shí)，會(huì)動(dòng)態(tài)渲染參團(tuán)類(lèi)型所對(duì)應(yīng)的價(jià)格。
如下圖sku設(shè)置。
代碼：
<el-table
ref="multipleTable"
:data="skuTableData"
tooltip-effect="dark"
style="width: 100%"
border
>
<el-table-column prop="id" label="SKU編號(hào)" width="120" align="center">
</el-table-column>
<el-table-column
prop="sku_attr_text"
label="規(guī)格"
width="120"
align="center"
>
</el-table-column>
<el-table-column prop="address" label="價(jià)格" align="center">
</el-table-column>
<el-table-column prop="stock" label="庫(kù)存" align="center">
</el-table-column>
//動(dòng)態(tài)渲染的表格列
<el-table-column
:label="item.val"
v-for="(item, index) in tableHead"
:key="index"
>
<template scope="scope">
<el-input
size="small"
v-model="scope.row[item.item]"
placeholder="0"
type="number"
></el-input>
</template>
</el-table-column>
</el-table>
tableHead:[
{ val: "2人團(tuán)價(jià)格", item: "target1" },
{ val: "3人團(tuán)價(jià)格", item: "target2" },
] 是個(gè)數(shù)組
skuTableData:[
{target1:1},
{target2:2}
]這個(gè)是表格的行數(shù)據(jù) 主要就是數(shù)據(jù)對(duì)應(yīng)上
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個(gè)方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue Element UI 中 el-table 樹(shù)形數(shù)據(jù)
這篇文章主要介紹了Vue Element UI 中 el-table 樹(shù)形數(shù)據(jù) tree-props 多層級(jí)使用避坑指南,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
在Vue3中,onUnmounted是一個(gè)生命周期鉤子,它會(huì)在組件實(shí)例被卸載（unmounted）和銷(xiāo)毀之前被調(diào)用,本文給大家介紹vue3中onUnmounted使用詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue滑動(dòng)解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
下面小編就為大家?guī)?lái)一篇vue-ajax小封裝實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例
移動(dòng)端頁(yè)面適配，rem和vw適配方案，本文主要介紹了vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問(wèn)題(get、post、put、delete)
這篇文章主要介紹了vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問(wèn)題(get、post、put、delete)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法(最新推薦)
在vue項(xiàng)目中,chunk-vendors.js報(bào)出的錯(cuò)誤提示經(jīng)常會(huì)導(dǎo)致開(kāi)發(fā)者困惑,正確查看錯(cuò)誤的方法是從錯(cuò)誤提示的詳細(xì)信息中找到報(bào)錯(cuò)原因,下面給大家分享vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法,感興趣的朋友一起看看吧2024-12-12
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08