在Vue中使用Select选择器拼接label的操作

我就废话不多说了，大家还是直接看代码吧~

<el-form-item label='货道商品' prop='productid'> <el-select v-model='form.productid' filterable placeholder='请选择' @change='changeselect'> <el-option v-for='item in myproducts' :key='item.Id' :label='`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`' :value='item.Id'> </el-option> </el-select></el-form-item>

正常使用方法：

:label=“item.label”

多个字段拼接：

:label='${item.Name}/${item.Brand}/${item.Type}/${item.Spec}'

补充知识：element el-select 动态创建绑定属性，视图不更新之-连环填坑

项目需求是这样的：

1. 在 a组件通过操作页面，请求拿到需要的data，然后将数据存在vuex 中，数据结构为多层嵌套结构大概如下

ceshi:[ { values:[ { value:[ {id:1,label:’哈哈1’}, {id:2,label:’哈哈2’}, {id:3,label:’哈哈3’} ] }, { value:[ {id:4,label:’哈哈4’}, {id:5,label:’哈哈5’}, {id:6,label:’哈哈6’} ] } ] } ]

在组件中通过获取vuex中的数据ceshi为数据源，

computed: { ...mapGetters([’ceshi’]) },

然后在b组件中动态渲染数据,因为我需要动态绑定属性所以我在computed中创建动态变量结构

//数据渲染 <div v-for='(x1,index1) in ceshi' :key='index1+’1’'> <div v-for='(x2,index2) in x1.values' :key='index2+’2’'> <el-select placeholder='请选择' v-model='form[index1].values[index2].value'> //动态绑定属性 <el-option v-for='item in x2.value' :key='item.id' :label='item.label' :value='item.id'> </el-option> </el-select> </div> </div>// computed: { ...mapGetters([’ceshi’]), form(){ return this.ceshi.map((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; return ojson }) } }

发现数据绑定成功，选择框变化数据也会变化，但是页面不改变，视图没有更新，通过在select代码中加入$set方法,也并没有用，视图同样没有更新；查看文档发现发现computer默认没有双向绑定 ，默认为getter 需要自己写setter函数，但是我发现,因为我的动态数据是我通过vuex 中的数据得来的，我也并没有定义其他的data，所以无法使用setter，于是进行修改如下

data() { return { form:[] },created () { this.ceshi.forEach((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; this.form.push(ojson) }) }

结果报错，分析原因应该是，我并没有在a组件操作获取数据，但这个时候created函数运行于是报错了，修改逻辑为通过watch 监听ceshi 数据变化

ceshi: { handler(newValue,oldValue) { this.ceshi.forEach((val,index) => { let values = val.values.map((val,index) => { let json={value:''} return json }) let ojson = {values}; this.form.push(ojson) }) }, deep: true }

再看效果，发现解决了，记录如下，希望能帮助到您！

以上这篇在Vue中使用Select选择器拼接label的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。