vue.js、vuetify ajaxで受け取ったデータをv-selectのitemに表示させたい

Question

vueを最近勉強しています。
初心者の質問ですが、よろしくお願いします。

前提・実現したいこと

ajax(axios)で受け取ったデータをv-selectのitemに表示させたい。
ajaxでデータが受け取れているのはconsoleで確認できていますが、自分が表示させたい情報を上手く表示させる事ができません。

発生している問題・エラーメッセージ

エラーメッセージはありません。
selectのitemは[object Object]になっています。

該当のソースコード

 <v-select
        v-model="todo"
        :items="todos"
        prepend-icon="mdi-clipboard-check-multiple-outline"
        label="to doを選択"
>
 </v-select>

  export default {
    data: () => ({
      todo: [],
      todos: [],
      }),
    
     methods: {

    fetchTodos: function(){
      axios.get('/api/get')
      .then(res=>{
        console.log(res)
        console.log(res.data)
      })
    },
    },
    
    created() {
    this.fetchTodos()
  },
  }

console.log(res.data)
[{…}, {…}]
  0: {…}
    id: (1)
    user_id: (1)
    name: (hoge)
    created_at: (...)
    updated_at: (...)
  1: {…}
     id: (2)
    user_id: (2)
    name: (hogehoge)
    created_at: (...)
    updated_at: (...)

この配列のnameをitems:todosに表示させたいです。

試したこと

console.log(res.data)
this.todo=re.data //[object.Object]
this.todo=res.data.name // no data Available

取得したres.dateをv-forで回して、そのnameを取得するというイメージなんですが、
どこにv-forを書けば良いのかさっぱり分からず。。。
<v-select>タグ内に書くとselecternha
増えていました、それはそうですよね・・・

データを受け取れているので、後は表示だけの問題だと思うのですが・・・
お手数おかけしますが、どうぞよろしくお願いします。

Answer 1

公式ドキュメントに

When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.

itemsにオブジェクトを用いる場合にはitem-textとitem-valueをオブジェクト内のプロパティに関連付ける必要があります。デフォルトではtextとvalueとなっており、これらは変更可能です。

と書かれています。つまりitem-textに指定したプロパティ名の値が、表示されるテキストに使われ、item-valueに指定したプロパティ名の値が、選択した時の値となります。

具体的には、todosが以下のようになっている場合

todos: [
    { id: 1, name: "hoge" },
    { id: 2, name: "fuga" },
]

以下のようにitem-valueにidをitem-textにnameを指定してやると、一番目のitemに"hoge",二番目のitemに"fuga"と表示させることができ、"hoge"を選択した場合にはtodoにidの値である1が代入され、"fuga"を選択した場合には2が代入されるようになります。

<v-select
    v-model="todo"
    item-value="id"
    item-text="name"
    :items="todos">
</v-select>

Comments

[CCHH]

早速試してみました！
できました、ありがとうございました！！

公式ドキュメントも見てみたんですが、そもそも公式ドキュメントが何を言っているのかも正直よくわからず・・・
でも教えて頂いてようやくわかりました、
item-textで表示する内容を指定してあげれば良いんですよね。

本当にありがとうございました！