Vue基于复选框选中的对象列表更新对象？答案

【问题标题】：Vue update object based on checkbox checked list of objects?Vue基于复选框选中的对象列表更新对象？
【发布时间】：2018-09-12 10:06:20
【问题描述】：

保存一些使用主数组但被添加到另一个对象的数组有些麻烦。

我有一个距离列表（数字数组）。

<ul>
    <li v-for="(distance, index) in distances">
        <a>{{ distance }} km</a>
    </li>
</ul>

同样的视图我可以添加一些新的距离

<input type="number" v-model="newDistance" /><button @click="addDistance(newDistance)">+</button>

这行得通，距离在添加时添加到数组中。将距离添加到 ul-list 后，我还想将距离添加到其他数组内的每辆汽车的复选框。

<article v-for="car in cars">
    <div v-for="(distance, index) in distances">
        <div @click="updateCar(car, product.distances)">
            <input :id="car.slug+index" :name="car.slug" type="checkbox" :checked="checkDistances(surface, car)" />
            <label :for="car.slug+index">{{ distance }} km</label>
        </div>
    </div>
</article>

工作功能：

checkDistances(distance, car) {
    var self = this;
    if(typeof car.distances === 'object') {
        if(typeof car.distances[self.form.slug] !== 'undefined') {
            return (car.distances[self.form.slug].includes(distance))
        }
    }
    return false;
},

以及添加距离的功能：

addDistance(newDistance) {
    this.distances.push(parseInt(newDistance));
},

这是 UpdateCar 函数

updateCar(car, distances) {
    console.log(this.distances);
    console.log(distances);
},

两个控制台日志显示相同的数组。它总是返回“距离”数组中的所有项目，而不仅仅是选定的输入字段..

我想要的是，我可以在选中复选框时更新汽车，因此它只会返回选定的距离。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您似乎只是根据checkDistances 的结果打开和关闭复选框，而不是将它们存储在任何地方。你的例子的组织对我来说不是 100% 清楚，但你可能想要一些类似的东西：

// In your template
<input
    :id="car.slug+index"
    :name="car.slug"
    type="checkbox"
    :checked="distance in car.distances"
    @click="addDistanceToCar(distance, car)" />

// In your methods:
addDistanceToCar(distance, car) {
    car.distances.push(distance)
}

【讨论】：