Vue.jsオブジェクトのインデックスを取得するオブジェクト配列内の一意のIDを使用していますか?
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 this.posts.splice(index, 1)
\t }
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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(uuid)">{{posty.title}}</button>
\t </div>
\t <div v-else>
\t <button v-on:click="testFunc(uuid)">No</button>
\t </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>
私はここで本当に重要な何かが足りないと思うが、私はtrack-by="uuid"
を使用して、私はそのオブジェクトの配列操作を行うことができますので、私はそのそれぞれのオブジェクトのインデックスをつかむことができます信じています。私の例では、オブジェクトのインデックスは返されません。
1)IDでトラックするのは、Vue.jsで本当に何ですか?
2)私のオブジェクトインデックスの返品を受け取る方法は? track-by="$index"
はオブジェクト配列では機能せず、単純な配列でしか機能しません。 track-by="uuid"