请问点击图片中这个元素的某一个后添加到字符串中，并且不能重复？

Question

这个是数据的格式

然后v-for循环显示后是这样的:


如果像这样选择以后

我需要获取到数据中的value值,像这样

举例：如果切换变成【帅哥、地球、长腿】的话，我需要【str】变量的值替换成【25，中国，25】，也可以只选择一个【帅哥】,【str】就变成【21】!!!能够动态的更改【str】的值！！
请问应该怎么写js的逻辑呢？

Answer 1

你可以先用对象的形式储存临时值（方便修改），最后提交的时候再弄成你需要的这种字符串形式

Answer 2

大致思想就是：
1、把选中那一项标记
2、每次触发事件的时候都循环这个list，把isSelected的value值输出

handleChange: function(items, item){
    item.isSelected = !item.isSelected
    this.str = this.list.map(obj=>{
        let selectedValue = ""
        obj.data.forEach(item=>{
            selectedValue = item.isSelected && item.value
        })
        return selectedValue
    })
}

最后可以把str里的值过滤成你要的样子

Answer 3

我写过一篇 《纯CSS实现多选组件》，建议你先看一下，理解做法。

然后剩下的就好办了，用 computed 合并一下几个值即可。

Answer 4

在data中定义一个空对象叫obj，使用p_n来作为key

handleChange(items, item) {
    // 改了一下设置值的方式
    if (!this.obj[items.p_n]) {
        this.$set(this.obj, items.p_n, item.value)
    } else {
        this.$delete(this.obj, items.p_n)
    }
}