从动态值创建 vue.js v-model

Question

我正在动态生成一些复选框。现在我需要动态创建 v-model。

<div 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 in alldietry" :key="v">
           <input type="checkbox" v-model="userinfo.{{#Here will be the value}}" value="" id="Vegetarian"> 
      <label for="Vegetarian">{{v.title}}</label>
        </div>
  </div>

进入 v-model 我已经尝试 v-model="userinfo.{{xyz}}" 它显示错误。

Answer 1

要将动态对象绑定到模型，您需要访问由模型值和用于显示列表的数据集共享的键。

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>

Answer 2

您不能在属性内部使用 {{ }} 插值。

v-model 值是一个 javascript 表达式，因此

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

你可以做到

v-model="userinfo[xyz]"

正如您通常在 javascript 中访问对象的动态属性时所做的那样。

从动态值创建 vue.js v-model

create vue.js v-model from dynamci value

vue.js

nuxt.js