2016-11-10 14 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>

答えて

1

https://jsbin.com/fafohinaje/edit?html,js,console,output

私はあなたのVue.delete方法はこちらを表すべきかわからないので、代わりにあなたは、配列のスプライス

methods: { 
    parentMethod: function(index){ 
    this.posts.splice(index, 1) 
    } 
} 
+0

に行くことができますありがとうございました、素晴らしい解決策! – 75Kane

関連する問題