Vue JS 通过唯一 id 删除数组中的对象？

Question

我正在使用 Vue.js 删除我的对象数组中的对象，问题是我找不到通过对象的唯一 ID 删除对象的方法。我正在使用 vue.js 版本 1。我还需要一种方法来更新同一个对象（它必须是反应式的，所以我的视图会自动更新）。

<!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>

Answer 1

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

我不知道你的 Vue.delete 方法应该在这里表示什么，所以你可以使用数组拼接

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

Vue JS 通过唯一 id 删除数组中的对象？

Vue JS delete objects in array by unique id?

javascript

vue.js

vue-component