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.

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆