Vモデルが添付された入力テキストフィールドがあり、誰かが「追加」ボタンを押すたびに、同じVモデルが添付された別の入力テキストがDOMに追加されます。次に、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>
あなたはあまりにも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/[email protected]/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:'[email protected]' }]
},
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>