私はVue.jsを学び始めましたが、jQueryで行ったようにVue.jsでこれをどのように行うのかわかりません:
<!-- jQuery -->
<h2>jQuery</h2>
<table id="t1">
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr id="r1">
<td><input name="item[]" type="text"/></td>
<td><input name="quantity[]" type="number"/></td>
<td><button class="deleteRow">X</button></td>
</tr>
</table>
<button id="addRow">Add Row</button>
.js
// jQuery
$(document).on('click', '#addRow', function(){
var row = parseInt($('#t1 tr:last-child').attr('id')) + 1;
alert(row);
$('#t1').append('<tr id="r'+row+'"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>');
});
$(document).on('click', '.deleteRow', function(){
var row = parseInt($(this).closest('tr').attr('id'));
$('#r'+row).remove();
});
Vueでクリックでまったく新しい要素を作成する方法と、それを削除する方法は?
すべてが JSFiddle にロードされています
VueJSはデータ駆動型なので、直接DOM操作を忘れてください。
以下の例では、inputs
配列(すべての行を格納する場所)を定義しているので、オブジェクトの配列になります。
テンプレートでは、inputs
配列を繰り返し処理し、入力ごとにインデックスを送信します-行の削除に必要です。
addRow
は、新しいオブジェクトをinputs
配列(定義済みスキーマ)にプッシュするメソッドであり、一意のインデックスを付けます。
以下に例を示します。 http://jsbin.com/zusokiy/edit?html,js,output
テンプレート:
<div id="app">
<ul>
<li v-for="(input, index) in inputs">
<input type="text" v-model="input.one"> - {{ input.one }}
<input type="text" v-model="input.two"> - {{ input.two }}
<button @click="deleteRow(index)">Delete</button>
</li>
</ul>
<button @click="addRow">Add row</button>
</div>
JS:
const app = new Vue({
el: '#app',
data: {
inputs: []
},
methods: {
addRow() {
this.inputs.Push({
one: '',
two: ''
})
},
deleteRow(index) {
this.inputs.splice(index,1)
}
}
})
より良いオプションはおそらくコンポーネントに分割することですが、これはこれまでのところ、とても良いことです。