Как добавить свойство checked по условию входящих данных?

Question

[Megionec]

Пытаюсь разобраться с vue. У меня с бэка приходят данные в json:
{
"id": 1,
"name_method": "Роджерса - Даймонд",
"category_id": 1,
"favorites": 1
},
{
"id": 2,
"name_method": "Шкала депрессии Бека",
"category_id": 1,
"favorites": 0
},
Мне нужно в зависимости от значения "favorites" установить checked.

<div v-for="method in methodsType">
    <div v-if="method.category_id === id">
        <input id="name" type="checkbox" role="switch"
             v-model="methodId"
             v-bind:value="method.id"
             class="form-check-input">
         <label for="name" class="form-check-label">{{ method.name_method }}</label>      
      </div>
</div>

export default {
    name: "IndexComponent",
    data() {
        return {
            methodsType: null,
            methodId: [],
            id: 1,
        }
    },
    mounted() {
        this.getMethods()
    },
    methods: {
        getMethods() {
            axios.get('/api/method/favorites/')
                .then(res => {
                    this.methodsType = res.data.methods;
                })
        },
},
}

Comments

[iljaGolubev]

попробуйте вместо

v-model="methodId"
v-bind:value="method.id"

сделать
@click="toggleMethod(method.id)"
и реализовать функцию toggleMethod, конечно.

Answer 1

[Aetae]

У тебя проблема не в vue, а в базовом html:
Оба input у тебя получают одинаковый id и оба label одинаковый for. Поведение браузера при клике на label в таком случае не определено, но на практике это значит, что клик идёт всегда первому input.

Соответственно надо сделать либо так:

<label class="form-check-label">
  <input 
    type="checkbox" 
    role="switch"
    v-model="methodId"
    :value="method.id"
    class="form-check-input" 
  />
  {{ method.name_method }}
</label>

Либо как-то так:

<input 
  :id="`input-${method.id}`" 
  type="checkbox" role="switch"
  v-model="methodId"
  :value="method.id"
  class="form-check-input" 
/>
<label :for="`input-${method.id}`" class="form-check-label">
  {{ method.name_method }}
</label>

Comments

[Megionec]

Спасибо за подсказку, я пока не зацикливался на id, но уже и не придется.

Короче разобрался. В документации написано, что v-model игнорит значение checked, и я зациклился на том, что как-то можно прописать значение checked по условию в html.
Все оказалось проще. Массив v-model хранит значение id которые должны быть отмечены. И осталось только прокинуть эти id в массив.

axios.get('/api/method/favorites/')
                .then(res => {
                    this.methodsType = res.data.methods;
                    res.data.methods.forEach(value => {
                        value.favorites === 1 ? this.methodId.push(value.id)  : '';
                    })

Спасибо всем, пойду тупить дальше =)