web-dev-qa-db-ja.com

ダイナミックDOM要素は、Vueで追加/削除します

私はVue.jsを学び始めましたが、jQueryで行ったようにVue.jsでこれをどのように行うのかわかりません：

<!-- 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 にロードされています

vue.jsvuejs2
17
lewis4u

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

})

より良いオプションはおそらくコンポーネントに分割することですが、これはこれまでのところ、とても良いことです。

39
Belmin Bedak