У меня есть поле ввода текста с прикрепленной v-моделью, и каждый раз, когда кто-то нажимает кнопку "Добавить", в DOM добавляется другой входной текст с той же самой v-моделью. Я думал, что тогда получу массив значений v-модели, но он получит только значение первого входа v-модели:
<div id="app">
<div id="references">
<input v-model="references" type="text">
</div>
<button @click="addReference">Add</button>
</div>
HTML, который я добавляю в dom, запускается методом addReference:
addReference: function(e) {
e.preventDefault();
console.log(this.references);
var inputEl = '<input v-model="references" type="text">';
$('#references').append(inputEl);
}
Это то, что Вуэйс не может сделать? Есть ли другой подход сбора значений из динамических элементов dom с помощью Vuejs?
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>