Vuejs：多个输入中的v-model数组答案

【问题标题】：Vuejs: v-model array in multiple inputVuejs：多个输入中的v-model数组
【发布时间】：2016-04-21 20:57:19
【问题描述】：

我有一个附加了 v-model 的输入文本字段，每次有人点击“添加”按钮时，都会将另一个输入文本添加到 DOM 中，并附加相同的 v-model。我以为我会得到一个 v-model 值的数组，但它只获取第一个 v-model 输入的值：

<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

我附加到dom的html是由addReference方法触发的：

addReference: function(e) {
  e.preventDefault();
  console.log(this.references);
  var inputEl = '<input v-model="references" type="text">';
  $('#references').append(inputEl);
}

这是 Vuejs 做不到的吗？使用 Vuejs 从动态 dom 元素中收集值是否有不同的方法？

new Vue({
  el: "#app",
  data: {
    references: "text"
  },
  methods: {
    addReference: function(e) {
      e.preventDefault();
      console.log(this.references);
      var inputEl = '<input v-model="references" type="text">';
      $('#references').append(inputEl);
    }
  }
})

input {
  display: block;
  margin: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

【问题讨论】：

在使用 Vue 几年后回首往事，在这个个人的“你好世界”Vue 问题让我微笑，走了很长一段路：D 再次感谢 @Bill Criswell
我喜欢听到这个！抱歉，我没有早点看到这个。
没问题 ^^ Vue 让做相当复杂的事情变得如此简单，仍然非常喜欢它

标签： arrays vue.js

【解决方案1】：

您正在考虑 DOM，这是一个很难改掉的习惯。 Vue 建议你先处理它的数据。

在您的确切情况下很难说，但我可能会使用 v-for 并制作一个 finds 数组来推送到我需要的更多信息。

这是我设置实例的方式：

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: '' });
    }
  }
});

这是我设置模板的方式：

<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value" :key="index">
  </div>
  <button @click="addFind">
    New Find
  </button>
</div>

虽然，我会尝试使用除 index 之外的其他东西来代替 key。

这是上面的演示：https://jsfiddle.net/crswll/24txy506/9/

【讨论】：

啊哈！因此，通过查找一个数组，它允许您创建一个 v-for，您有点告诉 vue 它将是一个数组，而不是期望 vuejs 的 v-model 单值到数组值魔术！非常感谢！绝对喜欢 Vuejs。
实际上@Bill Criswell，虽然这已经澄清了一些事情，但这并不是我所需要的真正答案，所以让我试着改写一下。我有一个查找的引用数组，当有人添加查找（单击 + 按钮）时，会出现一个新的输入字段，可以用另一个引用填充。所以基本上它是用户可以提供的参考列表。
据我所知，这就是小提琴正在做的事情。
非常感谢，thinking too DOM, it's a hard as hell habit to break
当我尝试这个时，我得到vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property '_withTask' of undefined

【解决方案2】：

如果您在询问如何在 vue2 中执行此操作并选择插入和删除它，请查看js fiddle

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

【讨论】：

【解决方案3】：

这是上面的演示：https://jsfiddle.net/sajadweb/mjnyLm0q/11

new Vue({
  el: '#app',
  data: {
    users: [{ name: 'sajadweb',email:'sajadweb@outlook.com' }] 
  },
  methods: {
    addUser: function () {
      this.users.push({ name: '',email:'' });
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
    <input v-model="user.name">
    <input v-model="user.email">
    <button @click="deleteUser(index)">
      delete
    </button>
  </div>
  
  <button @click="addUser">
    New User
  </button>
  
  <pre>{{ $data }}</pre>
</div>

【讨论】：