如何在 vue js 的 v-for 循环中使用 v-model 和对象答案

【问题标题】：How can I use v-model with an object inside a v-for loop in vue js如何在 vue js 的 v-for 循环中使用 v-model 和对象
【发布时间】：2019-12-16 07:55:33
【问题描述】：

假设我有这种对象

{
  [
    {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

但是，当我在输入字段中输入内容时，它只会复制输入字段的原始值

【问题讨论】：

你试过v-model="name.name"吗？
我的意思是我想将对象本身用作 v-model 值，而不仅仅是对象内部的名称。
@YvesGonzaga 这是不可能的。
@YvesGonzaga 在 jsfiddle 中，他没有将 obj 更新为 v-model，他只是使用 v-model 指令将对象共享给子组件，但在子组件内部，他使用的是 obj.value。但问题是，你只更新对象内部的name属性吗？这真的很简单：jsfiddle.net/7wcvot3m
@The.Bear 你的权利，我才意识到。我一直这样使用它。我多虑了。我认为这是因为过去几天的工作压力很大。非常感谢。

标签： vue.js vuejs2

【解决方案1】：

您应该根据最初所做的得到 [Object Object]。我认为您不能将输入模型作为对象数组。

明确地说，这是一个对象数组：

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

对于 v-for，您应该获取索引，以防 id 和索引在某些时候不匹配，并且您应该提供一个键（它可以只在索引中或 id 中很有帮助。

<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-model 将再次使他们能够改变“名称”对象。

【讨论】：

【解决方案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>

【讨论】：