Vue.js Remove a Nested Object from Array

Question

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!

Roy J · Accepted Answer · 2016-10-18 21:25:33Z

2

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

answered Oct 18, 2016 at 21:25

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Randy Rankin Over a year ago

Thanks very much @roy-j! This worked perfectly and I now understand why it works!

Collectives™ on Stack Overflow

Vue.js Remove a Nested Object from Array

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related