Использование переключателей для установки состояния элемента с помощью Vue.js

Question

В настоящее время у меня есть таблица categories, которую я повторяю и отображаю в виде таблицы, где в каждой строке есть группа переключателей, которые могут устанавливать состояние категории:

<tr v-for="cat in categoryList">
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="radio" v-bind:name="'cs-' + cat.id" v-bind:id="'cs-neutral-' + cat.id" value="neutral" v-model="cat.state"> Neutral
  </label>
  <label class="btn btn-secondary">
    <input type="radio" v-bind:name="'cs-' + cat.id" v-bind:id="'cs-good-' + cat.id" value="good" v-model="cat.state"> Good
  </label>
  <label class="btn btn-secondary">
    <input type="radio" v-bind:name="'cs-' + cat.id" v-bind:id="'cs-bad-' + cat.id" value="bad" v-model="cat.state"> Bad
  </label>
  </div>
</tr>

Однако при отображении не устанавливается ни одна правильная кнопка-переключатель, и item.state не обновляется при изменении. Как это исправить?

Answer 1

Убедитесь, что вы используете это. $ Set для обновления массива, иначе Vue не будет отслеживать изменения.

Документация

Codepen

---

HTML:

<div id="app">
  <table>
    <tr v-for="cat in categoryList">
      <td>
        <label>
          <input type="radio" :name="'cs-' + cat.id" :id="'cs-neutral-' + cat.id" value="neutral" v-model="cat.state"> Neutral
        </label>

        <label>
          <input type="radio" :name="'cs-' + cat.id" :id="'cs-good-' + cat.id" value="good" v-model="cat.state"> Good
        </label>

        <label>
          <input type="radio" :name="'cs-' + cat.id" :id="'cs-bad-' + cat.id" value="bad" v-model="cat.state"> Bad
        </label>
      </td>
    </tr>
  </table>
 </div>

Javascript:

new Vue({
  el: "#app",

  data: {
    categoryList: [
      { id: 1, state: "neutral" },
      { id: 2, state: "neutral" },
      { id: 3, state: "neutral" },
      { id: 4, state: "neutral" },
    ]
  }
})