Vue.js 从数组中删除嵌套对象 [英] Vue.js Remove a Nested Object from Array

问题描述

我有一个位置数组，每个位置都有几个事件.我想为用户提供删除整个位置以及位置事件的能力.我使用 $remove 进行这项工作.我还想为用户提供从某个位置删除单个事件的能力.这就是我被困的地方.

这是html:

<h2>{{location.id}}:{{location.street_address}}<a href="javascript:;"@click="deleteLocation(location)"><i class="fa fa-trash pull-right"></i></a><小时><ul><li v-for="event in location.events">{{ event.location_id }}.{{ event.id }}:{{ event.title }}<a href="javascript:;"@click="deleteEvent(event)"><i class="fa fa-trash pull-right"></i></a>

这是javascript:

new Vue({el: '身体',数据: {地点:[{编号:1，street_address: '123 Oak',事件:[{编号:1，location_id: 1,标题:'橡树街事件 1'}, {编号:2，location_id: 1,标题:'橡树街活动 2'}]}, {编号:2，street_address: '456 Pine Street',事件:[{编号:3，location_id: 2,标题:'松树街事件 1'}, {编号:4，location_id: 2,标题:'松树街活动 2'}]}, {编号:3，street_address: '789 Elm Street',事件:[{编号:5，location_id: 3,标题:榆树街事件 1"}, {编号:6，location_id: 3,标题:榆树街活动 2"}]}]},方法: {删除位置(位置){this.locations.$remove(location);控制台日志(位置)；},删除事件(事件){this.locations.events.$remove(event);控制台日志(事件)；}}

这是一个小提琴 JSFiddle

如果有人能看一下，我真的很感激！

解决方案

this.locations 是一个位置数组.该数组不包含 events 属性；数组的单个元素做.您需要将位置和事件传递给您的 deleteEvent:

和

deleteEvent(location, event) {location.events.$remove(event);控制台日志(事件)；}

I have a an array of locations and each location has several events. I would like to offer the user the ability to remove the entire location along with the location's events. I have this working using $remove. I would also like to offer the user the ability to remove a single event from a location. This is where I'm stuck.

Here is the html:

<div class="wrapper" v-for="location in locations">
  <h2>
    {{ location.id}}: {{ location.street_address }}
    <a href="javascript:;" @click="deleteLocation(location)">
      <i class="fa fa-trash pull-right"></i>
    </a>
  </h2>
  <hr>
  <ul>
    <li v-for="event in location.events">
      {{ event.location_id }}.{{ event.id }}: {{ event.title }}
      <a href="javascript:;" @click="deleteEvent(event)">
        <i class="fa fa-trash pull-right"></i>
      </a>
    </li>
  </ul>
</div>

And here is the javascript:

new Vue({
  el: 'body',
  data: {
    locations: [{
      id: 1,
      street_address: '123 Oak',
      events: [{
        id: 1,
        location_id: 1,
        title: 'Oak Street Event 1'
      }, {
        id: 2,
        location_id: 1,
        title: 'Oak Street Event 2'
      }]
    }, {
      id: 2,
      street_address: '456 Pine Street',
      events: [{
        id: 3,
        location_id: 2,
        title: 'Pine Street Event 1'
      }, {
        id: 4,
        location_id: 2,
        title: 'Pine Street Event 2'
      }]
    }, {
      id: 3,
      street_address: '789 Elm Street',
      events: [{
        id: 5,
        location_id: 3,
        title: 'Elm Streem Event 1'
      }, {
        id: 6,
        location_id: 3,
        title: 'Elm Street Event 2'
      }]
    }]
  },
  methods: {
    deleteLocation(location) {
        this.locations.$remove(location);
        console.log(location);
    },
    deleteEvent(event) {
        this.locations.events.$remove(event);
        console.log(event);
    }
  }

And here is a fiddle JSFiddle

If someone could take a look I would really appreciate it!

解决方案

this.locations is an array of locations. The array does not contain an events property; individual elements of the array do. You need to pass the location as well as the event to your deleteEvent:

<a href="javascript:;" @click="deleteEvent(location, event)">

and

deleteEvent(location, event) {
    location.events.$remove(event);
    console.log(event);
}

这篇关于Vue.js 从数组中删除嵌套对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！