[英]Dynamic DOM elements add/remove with Vue
I have started to learn Vue.js and i can't figure it out how would you do this in Vue.js like I did it with jQuery:我已经开始学习 Vue.js,但我不知道你会如何在 Vue.js 中做到这一点,就像我用 jQuery 做的那样:
<!-- 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 .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();
});
How to create a whole new element on a click with Vue and how to remove it?如何使用 Vue 单击创建一个全新的元素以及如何删除它?
Here is all loaded in JSFiddle这里全部加载在JSFiddle 中
VueJS is data driven, so forget on direct DOM manipulations. VueJS 是数据驱动的,所以忘记直接的 DOM 操作。
In example below, you will see that I've defined the inputs
array - that's the place where would we store all rows - so it would be array of objects.在下面的示例中,您将看到我已经定义了
inputs
数组 - 这是我们存储所有行的地方 - 所以它将是对象数组。
In our template we're iterating through the inputs
array and for each input we send index too - required for row deleting.在我们的模板中,我们遍历
inputs
数组,并且对于每个输入,我们也发送索引 - 行删除所必需的。
addRow
is method push new object to our inputs
array (with predefined schema), and give it unique index. addRow
是将新对象推送到我们的inputs
数组(具有预定义架构)的方法,并为其提供唯一索引。
Here is the example: http://jsbin.com/zusokiy/edit?html,js,output这是示例: http : //jsbin.com/zusokiy/edit?html,js,output
Template:模板:
<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: JS:
const app = new Vue({
el: '#app',
data: {
inputs: []
},
methods: {
addRow() {
this.inputs.push({
one: '',
two: ''
})
},
deleteRow(index) {
this.inputs.splice(index,1)
}
}
})
Better option would be maybe break it into components, but this is so far, so good.更好的选择可能是将其分解为组件,但到目前为止,还不错。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.