Vue动态设置v-model
需求:从后端获取到列表数据如下,想动态渲染el-input输入框,以propertyNameZh的值为标签名,propertyNameEn的值为v-model绑定对象。goodsProperty:[{'propertyNameZh':'商品售价','propertyType':'text','propertyNameEn':'goodsPrice','propertyUnit':'元',},{
·
需求:从后端获取到列表数据如下,想动态渲染el-input输入框,以propertyNameZh的值为标签名,propertyNameEn的值为v-model绑定对象。
goodsProperty:[
{
'propertyNameZh':'商品售价',
'propertyType':'text',
'propertyNameEn':'goodsPrice',
'propertyUnit':'元',
},
{
'propertyNameZh':'活动价',
'propertyType':'text',
'propertyNameEn':'goodsAdPrice',
'propertyUnit':'元'
}
[
方法:
①遍历上面的数组,并将propertyNameEn的值设置成goodsProperty的一个属性
this.goodsProperty.forEach((item,index)=>{
this.$set(item,item.propertyNameEn,'');
}
②设置v-model,我这里是用的talbe来对齐的,或者可以用for来循环。
<el-table
:data="goodsProperty"
style="width: 100%;"
:show-header="false"
v-if="goodsProperty.length>0"
>
<el-table-column>
<template slot-scope="scope">
<el-input type="text" v-model="scope.row[scope.row.propertyNameEn]"> </el-input>
</template>
</el-table-column>
</el-table>
更多推荐
已为社区贡献1条内容
所有评论(0)