vue.js v-for如何使用对象值？

Question

数据结构

data(){
 return{
  countries:[
   {Germany:'de'},
   {Japan:'jp'},
   {China:'ch'}]
 }
}

并且从这些数据中，我只需要对象的值，例如：'de'，'jp'，'ch'

  <v-checkbox v-for="n in this.countries" :key="n" :label="`${n}`" :value="n"></v-checkbox>

但是当我这样做时，它仅显示[object Object]。如何仅从对象中取出价值？

Answer 1

您正在尝试输出整个对象。这就是为什么要获得该输出的原因。

您需要访问对象值。尝试使用Object.values(n)[0]。像这样的东西

<v-checkbox v-for="(n, index) in this.countries" :key="index" :label="Object.values(n)[0]" :value="n"></v-checkbox>