2017-02-28 217 views
3

添加/刪除我已經開始學習Vue.js就像我用jQuery做的我不出來,你會怎麼做這Vue.js:動態DOM元素與Vue公司

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

回答

5

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

}) 

更好的選擇是可能分解成組成部分,但是這是到目前爲止,一切都很好。

+0

它的工作原理......但爲什麼你把表格和tr標籤改成ul和li ...這有什麼關係嗎? – lewis4u

+0

在我看來,它不= = http://jsbin.com/padecawido/1/edit?html,js,output – lewis4u

+1

它沒關係,我只是使用更快的方式:) –