CODEWITHSUNDEEP
vue.js
jenny
jenny

Reputation: 347

vue.js v-for How can I use object value?

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?

Upvotes: 0

Views: 669

Answers (1)

Radu Diță
Radu Diță

Reputation: 14171

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.

Upvotes: 1

Related Questions