Блог

У меня есть массив местоположений, и в каждом местоположении есть несколько событий. Я хотел бы предложить пользователю возможность удалить все местоположение вместе с событиями местоположения. У меня это работает с помощью $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

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

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

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

и

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