javascript - Vue.js using unique id in my objects array to grab the index of my object? -
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){ this.posts.splice(index, 1) } } });<!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"> <div v-if="posty.votes === '15'"> <button v-on:click="testfunc(uuid)">{{posty.title}}</button> </div> <div v-else> <button v-on:click="testfunc(uuid)">no</button> </div> </template> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> </body> </html>i think missing important here believe using track-by="uuid" allow me grab index of respective object can array operation on object. example not return index of object.
1) track id in vue.js ?
2) how return objects index? track-by="$index" not work objects array simple array. need solution gives me index track-by="uuid"
'track-by' used hint vue can track each node’s identity, , reuse , reorder existing elements.
it's not can access in method, it's used vue internals only.
therefore, have refer each object's uuid on click events, so:
<button v-on:click="testfunc(posty.uuid)">{{posty.title}}</button> however, think looking following:
<ul class="list-group"> <li v-for="(item, index) in items"> {{ testmethod(index) }} </li> </ul> v-for supports optional second argument index of current item. that's 'vue way' pass item's index in v-for loop.
Comments
Post a Comment