首页 文章

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

提问于
浏览 次
-1

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

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

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

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

输入字段已创建，但如何将值与object属性绑定，我尝试使用（v-model =“item [index]”），但它不起作用 .

javascript vue.js

3 回答

  • 0

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

    v-model="dataArray[0][index]"
    回复于
  • 0

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

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

    回复于
  • 0

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

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

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

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

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

    我实际上很想知道另一个解决方案是什么 .

    回复于

相关问题