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

ロイ・J @