web-dev-qa-db-fra.com

Éléments DOM dynamiques ajouter / supprimer avec Vue

J'ai commencé à apprendre Vue.js et je ne peux pas comprendre comment vous feriez cela dans Vue.js comme je l'ai fait avec 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

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

Comment créer un nouvel élément sur un clic avec Vue et comment le supprimer?

Ici tout est chargé dans JSFiddle

vue.jsvuejs2
17
lewis4u

VueJS est basé sur les données, alors oubliez les manipulations directes du DOM.

Dans l'exemple ci-dessous, vous verrez que j'ai défini le tableau inputs, c'est-à-dire l'endroit où nous pourrions stocker toutes les lignes. Il s'agirait donc d'un tableau d'objets.

Dans notre modèle, nous parcourons le tableau inputs et, pour chaque entrée, nous envoyons également un index - indispensable pour la suppression de lignes.

addRow is method Pousser un nouvel objet dans notre tableau inputs (avec un schéma prédéfini), et lui donner un index unique.

Voici l'exemple: http://jsbin.com/zusokiy/edit?html,js,output

Modèle:

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

})

Une meilleure option consisterait peut-être à le diviser en composants, mais c’est tout à fait satisfaisant.

39
Belmin Bedak