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)的類型后，所關(guān)聯(lián)的參團(tuán)商品設(shè)置sku時(shí)，會(huì)動(dòng)態(tài)渲染參團(tuán)類型所對(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)文章
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來(lái)部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本文主要介紹了Vue.js的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
VUE中攔截請(qǐng)求并無(wú)感知刷新token方式
這篇文章主要介紹了VUE中攔截請(qǐng)求并無(wú)感知刷新token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue源碼中的檢測(cè)方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
學(xué)習(xí)vue.js中class與style綁定
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vite構(gòu)建vue3項(xiàng)目的全過(guò)程記錄
vite是VUE3創(chuàng)建項(xiàng)目的工具,項(xiàng)目大了之后,性能明顯優(yōu)于webpack,下面這篇文章主要給大家介紹了關(guān)于vite構(gòu)建vue3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue2實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動(dòng)翻頁(yè)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03