Dynamique des éléments du DOM ajouter/supprimer avec Vue

J'ai commencé à apprendre Vue.js et je ne peux pas comprendre comment vous faites cela dans la 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 tout nouvel élément, cliquez avec Vue et comment le supprimer?

Ici tout est chargé dans JSFiddle

OriginalL'auteur lewis4u | 2017-02-28

  1. 32

    VueJS est piloté par les données, alors oublie direct les manipulations DOM.

    Dans l'exemple ci-dessous, vous verrez que j'ai défini la inputs tableau - qui est l'endroit où en serions-nous stocker toutes les lignes - donc ça serait un tableau d'objets.

    Dans notre modèle, nous sommes en parcourant la inputs tableau et pour chaque entrée nous envoyer indice de trop - requis pour la ligne à supprimer.

    addRow est la méthode push nouvel objet de notre inputs tableau (avec schéma prédéfini), et lui donner un index unique.

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

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

})

    Meilleure option serait peut-être la casse dans les composants, mais c'est tellement loin, tellement bon.

    ça marche...mais pourquoi avez-vous de changer de table et des tr étiquette ul et li...est-ce important?
    il me semble qu'il n'a pas d' = jsbin.com/padecawido/1/edit?html,js,sortie
    Il n'a pas d'importance, je viens d'utiliser la méthode plus rapide 🙂
    Est le mot inputs une sorte de mot-clé en vue?
    Je ne le pense pas, mais pas sûr - github.com/vuejs/vue/blob/dev/src/compiler/error-detector.js

    OriginalL'auteur Belmin Bedak