Vuejs: 多输入的 v 模型数组

我有一个附加了 v-model 的输入文本字段，每当有人点击“ Add”按钮，就会有另一个附加了 v-model 的输入文本添加到 DOM 中。我想我会得到一个 v- 模型值的数组，但是它只能得到第一个 v- 模型输入的值:

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

163815 次浏览
小开
最佳答案

您正在思考 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/

小开

如果你想知道如何在 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>

小开

这里是上面的一个演示: 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>


提交答案