vue項(xiàng)目動態(tài)渲染input,綁定的參數(shù)不實(shí)時更新問題
更新時間：2024年03月24日 09:46:25 作者：海上樓月鏡中花〃
這篇文章主要介紹了vue項(xiàng)目動態(tài)渲染input,綁定的參數(shù)不實(shí)時更新問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue動態(tài)渲染input,綁定的參數(shù)不實(shí)時更新
遇到過一個問題 按照需求 需要根據(jù)后端返回的list 渲染選項(xiàng)并將輸入的參數(shù)回傳
但是渲染后發(fā)現(xiàn)在輸入框輸入時 輸入框中沒有內(nèi)容 數(shù)據(jù)沒有進(jìn)行更新
在input中加一句 刷新數(shù)據(jù) 可解決該問題
@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="請輸入內(nèi)容"
v-model="item.inputKey">
</el-input>
</el-form-item>
</template>
</div>
vue動態(tài)渲染表格
項(xiàng)目場景
拼團(tuán)的后臺項(xiàng)目，項(xiàng)目中需要設(shè)置參團(tuán)的sku，也就是所開的這個團(tuán)是幾人的團(tuán)，開團(tuán)的人數(shù)不同，價(jià)格也就不同。
所以需要動態(tài)渲染個表格的列，如下圖中2人團(tuán)價(jià)格以及3人團(tuán)價(jià)格表頭
需求描述
當(dāng)后臺管理員選擇開團(tuán)的類型后，所關(guān)聯(lián)的參團(tuán)商品設(shè)置sku時，會動態(tài)渲染參團(tuán)類型所對應(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編號" 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="庫存" align="center">
</el-table-column>
//動態(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" },
] 是個數(shù)組
skuTableData:[
{target1:1},
{target2:2}
]這個是表格的行數(shù)據(jù) 主要就是數(shù)據(jù)對應(yīng)上
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來部署前端項(xiàng)目,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue微信公眾號網(wǎng)頁分享的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
這篇文章主要介紹了vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了Vue.js的相關(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了VUE中攔截請求并無感知刷新token方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了vue源碼中的檢測方法的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)目的全過程記錄
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ù)字滾動翻頁效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue2如何實(shí)現(xiàn)數(shù)字滾動翻頁效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03