<li v-for="(size, index) in sizes" :key="index">{{ size }}</li>
I'm new to VueJS and I'm playing around with Vue Directives. I wanna know where to get the list of :key values in the console log or developer tools. For now, I'm setting it to id attribute and reading it. Appreciate any kind of help
If you're just playing around with it and want to be able to log it to console, you could add a log function to your methods
methods:{
log(..args){
console.log(...args)
}
}
then you can use the log function anywhere and pass it the same value
<li v-for="(size, index) in sizes" :key="index">{{ size }}{{log(index)}}</li>
...but that only works if you can pass the same value to both
Vue.createApp({
data: () => ({
items: ['a', 'b', 'c']
}),
methods: {
log(...args) {
console.log(...args)
},
},
}).mount("#app");<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.prod.js"></script>
<div id="app">
<li v-for="(item, index) in items" :key="index">{{ item }}{{log(index)}}</li>
</div>