Question

假设我有这种物体

{
  [
    {id:1, name:'name1'},
    {id:2, name:'name2'}
  ]
}

让我们为此对象数组names调用变量。我想将整个对象本身用作v-model值

如何在v-for循环中将对象直接用作v-model的值？我尝试过这样的事情

我尝试过这样的事情

<div v-for="name in names">
  <input v-model="name">
</div>

但是它在输入字段中输入了这样的[object Object]。

当用户使用特定对象编辑特定输入字段时，我想动态更改此对象的值。

编辑：

我尝试使用这种方法 https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components

但是，无论何时我在输入字段上键入内容，它只会复制输入字段的原始值

Answer 1

您应该基于最初的操作获得[Object Object]。我认为您不能将输入模型包含对象数组。

要清楚，这是一个对象数组：

let names = [
    {id:1, name:'name1'},
    {id:2, name:'name2'},
];

对于v-for，您应该获取索引，以防万一id和index在某些时候不匹配，并且应该提供一个键（该键可以只是在索引或id中。< / p>

<div v-for="(name, i) in names" :key=name.id>
    <div class="name">
        <span>{{i}}</span><input v-model="name.name">
    <div>
</div>

该代码将创建一个循环，循环显示每个名称，并带有一个索引号。这将允许您的用户更改“名称”对象的基础数据。

如果您的名称对象很大，您将获得很多HTML，但是有必要做您想做的事情。您可以执行的其他选择是忘记v-for。仅显示一个输入，并允许您的用户手动遍历您的对象（使用“ +”和“-”按钮等），直到找到正确的名称为止。从那里开始，v模型将再次使它们能够变异“名称”对象。

Answer 2

直接链接你的数据数组

new Vue({
  el: '#app',
  data () {
    return {
      names: [
        { name: 'first' },
        { name: 'second' }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ names }}

<div v-for="(name, i) in names">
    <div class="name">
        <input v-model="names[i].name">
    <div>
</div>
</div>

如何在vue js中的v-for循环内的对象上使用v-model

2 个答案: