How do I store object as a radio input value in Vue?

Ilmi 0
Viewed 54

I have an array of objects like below :

const plans = [{type:'2'},{type:'3'},{type:'1'}]

And I want to store those values into radio inputs in Vue. I've tried this :

<input type="radio" v-model="pick" :value="plans[0]" />
<input type="radio" v-model="pick" :value="plans[1]" />
<input type="radio" v-model="pick" :value="plans[2]" />

But instead I got an error :

Invalid prop: type check failed for prop "value". Expected String, Number, got Object

Is there any way I can do to hack this? Thank you

vuejs2 nuxt.js vue.js javascript
1 Answers

If I understood you correctly try like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      pick: null,
      plans: [{type:'2'}, {type:'3'}, {type:'1'}]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="item in plans" :key="item.type">
    <input type="radio" v-model="pick" :value="item" />
    <label>{{ item.type }}</label>
  </div>
  {{ pick }}
</div>

Nikola Pavicevic0
Related