data structure
data(){
return{
countries:[
{Germany:'de'},
{Japan:'jp'},
{China:'ch'}]
}
}
and from those data I only need value of the objects ex: 'de','jp','ch'
<v-checkbox v-for="n in this.countries" :key="n" :label="`${n}`" :value="n"></v-checkbox>
but when I do this it only shows [object Object]. How can I put out only value from the object?
You are trying to output an entire object. That's why you're getting that output.
You need to access the object values. Try using Object.values(n)[0]. Something like this
<v-checkbox v-for="(n, index) in this.countries" :key="index" :label="Object.values(n)[0]" :value="n"></v-checkbox>
But it is better if you restructure your data object. Something similar to this
data(){
return{
countries:[{name: 'Germany', code: 'de'},
{name: 'Japan', code: 'jp'},
{name: 'China': code: 'ch'}
]
}
}
And update your v-for
<v-checkbox v-for="n in this.countries" :key="n.code" :label="n.code" :value="n"></v-checkbox>
Also, there's no need for template strings here, you can use plain JS.
Your key is also wrong, as this is not unique. You can use index as in my first example, or use the code if that's unique.
v-foras it is a single checkbox here? It will anyways will have a single label & value..