我如何使用Vue Js将对象值绑定到动态添加的输入字段

Question

我在数组中有一个对象，其属性和值是这样动态添加的

  dataArray: [
    {
      first_name: "john",
      last_name: "doe",
      age: "45"
    }
  ]

我想创建与object属性对应的输入字段，所以我这样做

<input v-for="(item,index) in dataArray[0]" :key="index" v-model="item[index]"></input>

创建输入字段，但是如何将值与object属性绑定， 我尝试使用（v-model =“ item [index]”），但无法正常工作。

Answer 1

没有这样的数据item[index]，请尝试：

v-model="dataArray[0][index]"

Answer 2

在您的示例中，item是一个对象（dataArray [0]）。对象属性没有索引，因此无法执行您尝试的操作。 item [index]正在寻找名为“ 0”，“ 1”和“ 2”的属性键，它们不存在。

如果dataArray中的所有对象都具有不同的属性，则应使用Object.keys（）创建对象键的数组，并使用这些键来获取所有属性值。 （有关示例，请参见this question。

Answer 3

在这种情况下，不需要index，因为item已经代表了值：

<input v-for="(item,index) in dataArray[0]" :key="index" v-model="item"></input>

但是，这种方法的问题在于您的模型不会做出反应。解决它的一种方法就是这样做。

1. 将您的html更改为 <input v-for="(item,index) in dataArray[0]" :key="index" @keyup="change(index, $event.target.value)"></input>

2. 将更改方法添加到您的Vue实例代码中： methods: { change(index, val) { this.dataArray[0][index] = val; console.log(index + ': ' + val); } }

我真的很想知道解决此问题的另一种方法。