I'm using Vue.js to remove an object in my object array, problem is I can't find a way to delete the object by it's unique id. I'm using vue.js version 1. I also need a way to update that same object (it has to be reactive, so my view gets updated automatically).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<div v-if="posty.votes === '15'">
<button v-on:click="testFunc(posty.uuid)">{{posty.title}}</button>
</div>
<div v-else>
<button v-on:click="testFunc(posty.uuid)">No</button>
</div>
</template>
<script src="vue-v1.js"></script>
<script>
Vue.component('post', {
template: "#my-component",
props: ['posty'],
methods: {
testFunc: function(index){
this.$parent.parentMethod(index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
posts: [{ uuid: '88f86fe9d',
title: "hello",
votes: '15'
},
{
uuid: '88f8ff69d',
title: "hello",
votes: '15'
},
{
uuid: '88fwf869d',
title: "hello",
votes: '10'
}]
},
methods: {
parentMethod: function(index){
Vue.delete(this.posts, index);
}
}
});
</script>
</body>
</html>