vue项目动态渲染input,绑定的参数不实时更新问题
作者：海上楼月镜中花〃
这篇文章主要介绍了vue项目动态渲染input,绑定的参数不实时更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue动态渲染input,绑定的参数不实时更新
遇到过一个问题 按照需求 需要根据后端返回的list 渲染选项并将输入的参数回传
但是渲染后发现在输入框输入时 输入框中没有内容 数据没有进行更新
在input中加一句 刷新数据 可解决该问题
@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="请输入内容"
v-model="item.inputKey">
</el-input>
</el-form-item>
</template>
</div>
vue动态渲染表格
项目场景
拼团的后台项目，项目中需要设置参团的sku，也就是所开的这个团是几人的团，开团的人数不同，价格也就不同。
所以需要动态渲染个表格的列，如下图中2人团价格以及3人团价格表头
需求描述
当后台管理员选择开团的类型后，所关联的参团商品设置sku时，会动态渲染参团类型所对应的价格。
如下图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="规格"
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>
//动态渲染的表格列
<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" },
] 是个数组
skuTableData:[
{target1:1},
{target2:2}
]这个是表格的行数据 主要就是数据对应上
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。