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

Vue.js从Array中删除嵌套对象

1 个答案: