Dynamische DOM-Elemente hinzufügen/entfernen mit Vue

Question

Ich habe begonnen Vue.js zu lernen, und ich kann es nicht herausfinden, wie würden Sie dies in Vue.js tun, wie ich es mit jQuery tat:

<!-- 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(); 
}); 

Wie erstellt man ein ganz neues Element auf einen Klick mit Vue und wie man es entfernt?

Hier werden alle geladen in JSFiddle

Answer 1

VueJS ist datengesteuert, so auf direkte DOM-Manipulationen vergessen.

Im Beispiel unten sehen Sie, dass ich das inputs Array definiert habe - das ist der Ort, an dem wir alle Zeilen speichern würden - also wäre es ein Array von Objekten.

In unserer Vorlage durchlaufen wir das Array inputs und für jeden Eingang senden wir auch einen Index - erforderlich für Zeilenlöschung.

addRow ist Methode Push neues Objekt zu unserem inputs Array (mit vordefiniertem Schema), und geben Sie ihm eindeutigen Index. Hier

ist das Beispiel: http://jsbin.com/zusokiy/edit?html,js,output

Vorlage:

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

}) 

bessere Option vielleicht ist es in Komponenten brechen würde, aber das ist so weit, so gut .