[Vuejs]-Using radio buttons to set item's state with Vue.js

by

0👍

✅

Make sure that you use this.$set to update array, otherwise Vue will not keep track of changes.

Documentation

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" },
    ]
  }
})

Leave a comment