Checkbox 多个复选框在启用时不起作用'；s值与vuejs相同

我查苹果的时候都是查菠萝。当我不检查菠萝时，它也是不检查苹果。 两个标签id都不同。我怎么能只检查一个苹果而不是菠萝

var demo=新的Vue({
el:'演示'，
数据：{
选中名称：[]
},
计算：{
计算名称（）{
让name=this.checkedNames；
返回names.toString（）；
}
}
})

苹果
香蕉
菠萝


选中的名称：{{checkedNames}
计算名称（颠倒顺序）：{{computedNames}

Vue是数据驱动的。由于您的Apple和菠萝复选框具有相同的

值，Vue认为它们是相同的

听起来你想完全使用不同的对象，所以试试这个


var demo=新的Vue({
el:'演示'，
数据：（）=>({
选项：[{
身份证号码：50，
标签：“苹果”，
价格:50
}, {
id:51，
标签：“香蕉”，
价格:51
}, {
身份证号码：52，
标签：“菠萝”，
价格:50
}],
选择：[]
}),
计算：{
计算名称：（{selections}）=>
selections.map（（{label}）=>label.join（“，”）
}
})

{{fruit.label}


计算名称：{{computedNames}}
选择：{{Selections}}
第一个和最后一个复选框的值都相同。由于Vue是数据驱动的，这导致两个复选框都被链接，但我只想添加苹果，而不是菠萝。我知道价钱一样。