Javascript Vue js数据绑定不'；行不通

我正在尝试创建一个vue组件，但每当我想用

v-show

隐藏一些元素时，它就不起作用了

当您单击列表中的任何元素时，我想将其隐藏，并在单击事件

元素上。visible

设置为false，因此在组件模板中，我将该值绑定到

v-show

，但它不会隐藏

我想这是因为

element.visible

是一种嵌套属性，但我不太确定

var集合=[
{id:1，名称：'element 1'}，
{id:2，名称：'element 2'}，
{id:3，名称：'element 3'}，
{id:4，名称：'element 4'}，
{id:5，名称：'element 5'}，
{id:6，名称：'element 6'}，
{id:7，名称：'element 7'}，
{id:8，名称：'element 8'}，
];
var multiselect={
道具：[“收藏”]，
数据：函数（）{
返回{
认购：【】，
认购：【】，
toUnsubscribe:[]，
数据集：[]
}
},
挂载：函数（）{
this.dataset=\ map（this.collection，函数（元素）{
element.visible=true；
返回元素；
});
},
方法：{
订阅：功能（元素）{
element.visible=false；
}
}
}
新Vue({
el:“#应用程序”，
组成部分：{
“多重选择”：多重选择
},
数据：{
元素：集合
}
})

.multiselect.list{
边框：1px实心#000；
身高：215px；
最大高度：215px；
溢出：滚动；
}
.multiselect.list.list元素{
文本对齐：居中；
填充：0.2米；
光标：指针；
}
.multiselect.list.list元素：悬停{
背景色：#d6dbdf；
}

{{element.name}

问题在于您正在修改已响应的对象

您正在通过

map

进行复制，并将其分配给一个新数组，这一事实使它变得模糊，但它是一个对响应对象的引用数组，每个对象都添加了

visible

属性。如果您检查父级中的数据项，您将看到它也被添加了

可见的

最简单的解决方法是使用
对象。分配
创建新对象并将属性复制到其中。这样，所有特性都将插入到非响应对象中，然后在指定过程中使其成为响应对象

  mounted: function(){
    this.dataset = _.map(this.collection, function(element){
      return Object.assign({}, element, {visible: true});
    });
  },

您可以在created中执行此操作，因为您不需要DOM元素。
作为一个有趣的变体，您不需要克隆
集合
元素或对其设置属性

有一个并行的标志数组就足够了，但是您必须注意更新它们的语法，并且标志必须包含在对象中才能被观察到。

i、 e一个
{visible:true}
数组，而不是
true
数组

参考：


var集合=[
{id:1，名称：'element 1'}，
{id:2，名称：'element 2'}，
{id:3，名称：'element 3'}，
{id:4，名称：'element 4'}，
];
var multiselect={
道具：[“收藏”]，
数据：函数（）{
返回{
visibleFlags:[]
}
},
已创建：函数（）{
this.collection.forEach（x=>{
this.visibleFlags.push（{visible:true}）；//Vue方法
})
},
方法：{
订阅：功能（索引）{
this.$set（this.visibleFlags，index，false）
}
}
}
新Vue({
el:“#应用程序”，
组成部分：{
“多重选择”：多重选择
},
数据：{
元素：集合
}
})
.multiselect.list{
边框：1px实心#000；
高度：125px；
最大高度：215px；
溢出：滚动；
}
.multiselect.list.list元素{
文本对齐：居中；
填充：0.2米；
光标：指针；
}
.multiselect.list.list元素：悬停{
背景色：#d6dbdf；
}

{{element.name}