[Vuejs]-Binding model attribute to radio button with vuejs

by

3👍

✅

A set of radio inputs should v-model the same variable: a scalar that takes on the value associated with the selected radio.

To translate that back and forth into your item list, you can use a settable computed.

new Vue({
  el: '#app',
  data: {
    items: [{
        id: 1,
        name: 'Foo',
        is_primary: false
      },
      {
        id: 2,
        name: 'Bar',
        is_primary: true
      },
      {
        id: 3,
        name: 'Baz',
        is_primary: false
      },
    ]
  },
  computed: {
    primaryItem: {
      get() {
        return this.items.find((i) => i.is_primary);
      },
      set(pi) {
        this.items.forEach((i) => i.is_primary = i === pi);
      }
    }
  }
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    <input name="primary" type="radio" :value="item" v-model="primaryItem">
  </div>
  <pre>{{JSON.stringify(items, null, 2)}}</pre>
</div>
👤Roy J

Leave a comment