Vuejs 在 v-model 中绑定数组答案

【问题标题】：Vuejs bind an array in a v-modelVuejs 在 v-model 中绑定数组
【发布时间】：2023-03-04 15:29:01
【问题描述】：

我想将 v-model 绑定到一个值数组

所以我有

paymenttypes:[
 {label:'cheque', value:1},
 {label:'two', value:2}
]

pays:[],
created(){
   this.paymentmethods.forEach((value) => {
     this.pays.push({id:value.value, ref: '' , val: 0 })
   });
}

现在在模板上

  <div class="row saleTotal" v-for="(key, extrafieldsDetails) in paymentmethods">
    <div class="col-sm-4">
      <h5>{{extrafieldsDetails.label}}</h5>
    </div>
    <div class="col-sm-4">
      <input type="number" min="0" class="text-right form-control" v-model="pays[key].ref">
    </div>
  </div>

但我得到一个错误

cannot read property 'ref' of undefined

可能出了什么问题？因为 pays 数组有一个带有 ref 键的对象。我哪里错了？

【问题讨论】：

你需要访问对象来获取引用
这就是我所做的，v-model="pays[key].ref"

标签： javascript vuejs2

【解决方案1】：

我假设您的变量 paymenttypes 和 paymentmethods 是相同的。

如果是这样，您的v-for 绑定不正确。您不会从 paymentmethods 中获取键值对，因为它是一个数组，不是一个对象。

所以，您的v-for 可以写成v-for="(item, index) in paymentmethods"，其中item 是paymentmethods 中的数组项，index 是item 在paymentmethods 中的索引。

那么您需要按如下方式替换属性访问器：

{{item.label}} 而不是{{extrafieldsDetails.label}}
pays[index].ref 而不是pays[key].ref

var app = new Vue({
  el: "#app",
  data: {
    paymentmethods:[
     {label:'cheque', value:1},
     {label:'two', value:2}
    ],

    pays:[]  
  },
  created(){
   this.paymentmethods.forEach((value) => {
     this.pays.push({id:value.value, ref: '' , val: 0 })
   });
   console.log(this.pays);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">

  <div class="row saleTotal" v-for="(item, index) in paymentmethods">
    <div class="col-sm-4">
      <h5>{{item.label}}</h5>
    </div>
    <div class="col-sm-4">
      <input type="number" min="0" class="text-right form-control" v-model="pays[index].ref">
    </div>
  </div>
  
</div>

【讨论】：