Vue.js Удаление вложенного объекта из массива

Question

У меня есть массив мест и каждое место имеет несколько событий. Я хотел бы предложить пользователю возможность удалить все местоположение вместе с событиями местоположения. У меня это работает, используя $ remove. Я также хотел бы предложить пользователю возможность удалить одно событие из местоположения. Здесь я застрял.

Вот 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> 

А вот 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); 
    } 
    } 

А вот скрипку JSFiddle

Если кто-то мог взглянуть я бы очень признателен !

Answer 1

this.locations является массивом мест. Массив не содержит свойства events; индивидуальные элементы массива. Вы должны передать местоположение, а также события в вашей deleteEvent:

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

и

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