javascript - 如何通过点击事件删除Vue Js中的父元素？

Question

我在laravel框架中使用vue js。

在这里，我需要删除子元素(按钮)的单击事件的父级。

我的 HTML :

<div id="campaign">
  <div class="parent_class">
    <input type="button" @click="remove_me($event)" class="remove_block">
  </div>
.....
  <div class="parent_class">
    <input type="button" @click="remove_me($event)" class="remove_block">
  </div>
</div>

VueJS:

var campaign = new Vue({
el: '#campaign',
data: {
    n: 1
},
methods: {
    remove_me: function ($event) {
        var confirm_delete('Are you sure to remove ?');
        if(confirm_delete){
               // How to Remove Parent Element [parent_class] ?
        }
    }
  }
});

我想在单击其子元素(按钮)时删除父元素('parent_class')。

此 Html 有多个父类。

我需要通过“Vue Js”删除最接近的父类

Answer 1

我认为这就是您正在寻找的:

http://jsbin.com/figubitiro/edit?html,js,output

从示例中提取的代码:

Vue.component('category', {
  props : ['category'],
  template : '<div>{{ category.name }} <button @click="remove">X</button></div>',

  methods: {
    remove: function() {
      this.$parent.categories.$remove(this.category);
    }
  }
});
new Vue({
    el : '#some-id',
    data : {
        categories : [
          { id : 1, name : 'cat name' },
          { id : 2, name : 'another cat'},
          { id : 3, name : 'third cat'}
        ]
    }
});

来源(谷歌):https://laracasts.com/discuss/channels/vue/how-to-remove-component-from-parents-array