Vue обновить объект на основе флажка проверенного списка объектов?

Question

Некоторые проблемы с сохранением некоторого массива, который использует основной массив, но добавляется к другому объекту.

У меня есть список расстояний (массив чисел).

<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);
},

В обоих журналах консоли показан один и тот же массив. Он всегда возвращает ВСЕ элементы, которые находятся в массиве «Расстояния», а не только выбранные поля ввода.

Что я хочу, так это то, что я могу обновить автомобиль при установке флажка, чтобы он возвращал только выбранные расстояния.

Answer 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)
}