2016-11-10 325 views
0

我正在使用Vue.js刪除我的對象數組中的一個對象,問題是我找不到通過它的唯一ID刪除對象的方法。我正在使用vue.js版本1.我還需要一種方法來更新同一個對象(它必須是被動的,所以我的視圖會自動更新)。Vue JS通過唯一ID刪除數組中的對象?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Vue Js - components</title> 
 
</head> 
 
<body> 
 

 

 
<!-- index.html --> 
 
<div id="app"> 
 
    <div class="container-fluid"> 
 
    <ul class="list-group"> 
 
     <post v-for="posty in posts" :posty="posty" track-by="uuid"></post> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<template id="my-component"> 
 
\t <div v-if="posty.votes === '15'"> 
 
\t <button v-on:click="testFunc(posty.uuid)">{{posty.title}}</button> 
 
\t </div> 
 
\t <div v-else> 
 
\t <button v-on:click="testFunc(posty.uuid)">No</button> 
 
\t </div> 
 
</template> 
 

 

 

 
<script src="vue-v1.js"></script> 
 
<script> 
 
Vue.component('post', { 
 
    template: "#my-component", 
 
    props: ['posty'], 
 
    methods: { 
 
    \t testFunc: function(index){ 
 
    \t \t this.$parent.parentMethod(index); 
 
    \t } 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    posts: [{ \t uuid: '88f86fe9d', 
 
\t \t \t \t title: "hello", 
 
\t \t \t \t votes: '15' 
 
\t \t \t }, 
 
\t \t \t { \t 
 
\t \t \t \t uuid: '88f8ff69d', 
 
\t \t \t \t title: "hello", 
 
\t \t \t \t votes: '15' 
 
\t \t \t }, 
 
\t \t \t { \t 
 
\t \t \t \t uuid: '88fwf869d', 
 
\t \t \t \t title: "hello", 
 
\t \t \t \t votes: '10' 
 
\t \t \t }] 
 
    }, 
 

 
    methods: { 
 
    \t parentMethod: function(index){ 
 
    \t \t Vue.delete(this.posts, index); 
 
    \t } 
 
    } 
 
}); 
 
</script> \t 
 
</body> 
 
</html>

回答