2016-11-13 17 views
1

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"

答えて

1

'track-by'は、Vueをヒントするためにのみ使用され、各ノードの識別情報を追跡し、既存の要素を再利用して並べ替えることができるようにするためのソリューションです。

メソッド内でアクセスできるものではなく、Vue内部でのみ使用されます。

したがって、あなたがそうのように、クリックイベントに各オブジェクトのUUIDを参照する必要があります。

<ul class="list-group"> 
    <li v-for="(item, index) in items"> 
    {{ testMethod(index) }} 
    </li> 
</ul> 

v-for:しかし

<button v-on:click="testFunc(posty.uuid)">{{posty.title}}</button> 

、私が何を探していることは、次のだと思いますまた、現在の項目のインデックスにオプションの2番目の引数をサポートしています。これは、アイテムのインデックスをv-forループに渡す「Vue方法」です。

関連する問題