[Vuejs]-Create vue.js v-model from dynamci value

by

2👍

✅

You can’t use {{ }} interpolation inside attributes.

The v-model value is a javascript expression, so instead of

v-model="userinfo.{{xyz}}"

you can just do

v-model="userinfo[xyz]"

as you would normally do in javascript when accessing a dynamic property of an object.

👤Decade Moon

1👍

To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.

let vm = new Vue({
el: '#app',
  data: {
    userinfo: {
      0: '',
      1: ''
    }
  },
  computed: {
    alldietry() {
      return [
      	{
          id: 0,
          title: 'Title'
        },
        {
          id: 1,
          title: 'Title'
        }
      ]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="form-group input-group">
  <label class="form-group-title">DIETARY PREFERENCES</label>
  <p>Please mark appropriate boxes if it applies to you and/or your family</p>
  <div class="check-group" v-for="(v, index) in alldietry" :key="index">
    <input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id"> 
    <label :for="v.id">{{v.title}}</label>
  </div>
  {{ userinfo }}
</div>
👤Adrien Rosi

Leave a comment