Vue JS通过唯一ID删除数组中的对象？答案

【问题标题】：Vue JS delete objects in array by unique id?Vue JS通过唯一ID删除数组中的对象？
【发布时间】：2016-11-10 04:10:25
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript vue-component vue.js

【解决方案1】：

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

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

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

【讨论】：