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