Как во Vue сделать один из чекбоксов по умолчанию checked и disabled?

Question

[HelpSophie]

Разбираюсь со Vue.
Есть такой калькулятор
https://jsfiddle.net/w6r1dnyq/
Но не могу понять как ему сообщить, что первая услуга всегда выбрана и это нельзя отменить? (Входит в комплект по умолчанию или идет всегда вместе с другой услугой которую уже выбрали)

Answer 1

[Михаил]

В таком духе, через computed с привязкой к v-model="product.checked"
https://jsfiddle.net/fg63dc1r/

Comments

[HelpSophie]

Так, но тогда у меня потерялся массивчик выбранных услуг.

[Aetae]

HelpSophie, дополню, ваше selectedProducts изначально ошибочно было сделано: если попадётся две услуги с одинаковой ценой - всё сломается, т.е. его убрали не только потому что так удобней.

[HelpSophie]

Aetae, как-то мне их надо собирать. Хотела потом выбранные вывести куда-нибудь в список.
Типа "вы выбрали такие-то услуги, заплатите 100 рублей"

[HelpSophie]

Чем дальше в лес, тем больше вопросов, чем ответов...

[HelpSophie]

Aetae, да, проверила, вы правы, конечно

[Aetae]

Собирать как-то так: this.products.filter(product => product.checked)

[HelpSophie]

Aetae, Михаил, спасибо

Answer 2

[0xD34F]

Вырезаете selectedProducts, вместо него используете в v-model свойства checked элементов products. Отключить чекбокс - свойства disabled у вас уже есть, просто привяжите их значения к чекбоксам.

<input
  type="checkbox"
  v-model="product.checked"
  :disabled="product.disabled"
>

Ну и в отсутствие selectedProducts следует переписать вычисляемое свойство totalPrice:

computed: {
  totalPrice() {
    return this.products.reduce((acc, n) => acc + n.checked * n.price, 0);
  },
},