微客导航 » 文章资讯 » 在Vue中使用Select选择器拼接label的操作

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

2023-07-13 10:46:55 348

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

正常使用方法：

:label=“item.label”

多个字段拼接：

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

补充知识：elementel-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中创建动态变量结构

//数据渲染


//动态绑定属性

// computed:{ ...mapGetters(['ceshi']), form(){ returnthis.ceshi.map((val,index)=>{ letvalues=val.values.map((val,index)=>{ letjson={value:""} returnjson }) letojson={values}; returnojson }) } }

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

data(){
return{
form:[]
},
created(){
this.ceshi.forEach((val,index)=>{
letvalues=val.values.map((val,index)=>{
letjson={value:""}
returnjson
})
letojson={values};
this.form.push(ojson)
})
}

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

ceshi:{
handler(newValue,oldValue){
this.ceshi.forEach((val,index)=>{
letvalues=val.values.map((val,index)=>{
letjson={value:""}
returnjson
})
letojson={values};
this.form.push(ojson)
})
},
deep:true
}

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐