使用 Vue 添加/删除动态 DOM 元素 [英] Dynamic DOM elements add/remove with Vue

问题描述

我已经开始学习 Vue.js，但我不知道如何在 Vue.js 中做到这一点，就像我在 jQuery 中所做的那样:

<h2>jQuery</h2><table id="t1"><tr><th>项目</th><th>数量</th></tr><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr><button id="addRow">添加行</button>

.js

//jQuery$(document).on('click', '#addRow', function(){var row = parseInt($('#t1 tr:last-child').attr('id')) + 1;警报(行)；$('#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

解决方案

VueJS 是数据驱动的，所以忘记直接操作 DOM.

在下面的示例中，您将看到我已经定义了 inputs 数组 - 这是我们存储所有行的地方 - 所以它将是对象数组.

在我们的模板中，我们遍历 inputs 数组，并且对于每个输入，我们也发送索引 - 行删除所必需的.

addRow 是将新对象推送到我们的 inputs 数组(具有预定义架构)的方法，并为其提供唯一索引.

示例如下:http://jsbin.com/zusokiy/edit?html,js,输出

模板:

 
<ul><li v-for="(input, index) in input"><input type="text" v-model="input.one">- {{ input.one }}<input type="text" v-model="input.two">- {{ input.two }}<button @click="deleteRow(index)">删除</button><button @click="addRow">添加行</button>

JS:

const app = new Vue({el: '#app',数据: {输入:[]},方法: {添加行(){this.inputs.push({一: ''，二: ''})},删除行(索引){this.inputs.splice(index,1)}}})

更好的选择可能是将其分解成组件，但到目前为止，一切都很好.

I have started to learn Vue.js and i can't figure it out how would you do this in Vue.js like I did it with 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();
});

How to create a whole new element on a click with Vue and how to remove it?

Here is all loaded in JSFiddle

解决方案

VueJS is data driven, so forget on direct DOM manipulations.

In example below, you will see that I've defined the inputs array - that's the place where would we store all rows - so it would be array of objects.

In our template we're iterating through the inputs array and for each input we send index too - required for row deleting.

addRow is method push new object to our inputs array (with predefined schema), and give it unique index.

Here is the example: http://jsbin.com/zusokiy/edit?html,js,output

Template:

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

})

Better option would be maybe break it into components, but this is so far, so good.

这篇关于使用 Vue 添加/删除动态 DOM 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！