Laravel + Vue + VuetifyでDBからselectboxを生成したい

Question

Laravel環境にてJSONデータを取得
Vue.jsを使用して変数に格納し、Vuetifyでselectboxを表示したいと考えています。

投稿ボタンを押すとモーダルウィンドウが表示され、その一部にセレクトボックスを表示させたいです。

こちらの記事を参考に、作成しましたのでそのまま変数commedianを使用して説明します。
https://blog.capilano-fw.com/?p=432

以下vuetifyのコードになります。

<v-select
　v-model="select"
　:items="commedian"
　:rules="[required, r_select]"
　name="commedians"
　required
></v-select>

この状態ですとセレクトボックス部分が[object,Object]と表示されてしまい、データが表示されていません。

:items="commedians.name"とすると、投稿ボタンが表示されなくなります。

Vueのfor文で記述する場合は表示されますが、他との見た目の問題があるので、vuetifyを使用したいと思っています。
Vuetifyでselectboxを生成する場合、DBから拾ってきたデータというのは表示されないものなのでしょうか？

ご回答お待ちしております。

7/10追記 ----------------------------------------------------------

<template> 　<v-select 　　v-model="select" 　　item-text="attributes" 　　:items="attributes" 　　name="attributes" 　　label="タグ*" 　　required 　></v-select> </template> <script> export default{ data: () => ({ attributes: {} }), mounted() { var self = this; var url = '/ajax/attribute'; axios.get(url).then(function(response){ self.attributes = response.data(); }); } ](e72d6f87b0ce3e4c87c6950f3599df10.jpeg)

Answer 1

vutify.jsのv-selectコンポーネントのitemsプロパティには文字列の配列かオブジェクトの配列を指定します。
オブジェクトを指定する場合、そのオブジェクトにtext、valueプロパティがあるかどうかでv-selectのプロパティの記述方法が変わります。
詳しくは選択フィールド コンポーネントのドキュメントをご確認ください。

文字列の場合

文字列がセレクトボックスの表示ラベルと値になります。

<v-card>
  <v-card-title>v-select with string</v-card-title>
  <v-card-subtitle>selected: {{ selected }}</v-card-subtitle>
  <v-card-text>
    <v-select v-model="selected" :items="fruits" name="fruits"> </v-select>
  </v-card-text>
</v-card>

data() {
  return {
    selected: '',
    fruits: ['apple', 'banana', 'cherry', 'dorian', 'elderberry']
  }
}

オブジェクトの場合

オブジェクトの場合は、そのオブジェクトに少なくともtextというプロパティが存在する場合、下記のように記述できます。
itemsプロパティに指定したオブジェクトのtextプロパティの値が表示ラベルと値になります。

<v-card>
  <v-card-title>v-select with string</v-card-title>
  <v-card-subtitle>selected: {{ selected }}</v-card-subtitle>
  <v-card-text>
    <v-select v-model="selected" :items="fruitsObj" name="fruits"> </v-select>
  </v-card-text>
</v-card>

data() {
  return {
    selected: '',
    fruitsObj: [
      {
        id: 1,
        text: 'apple',
        price: 100
      },
      {
        id: 2,
        text: 'banana',
        price: 110
      },
      {
        id: 3,
        text: 'cherry',
        price: 120
      },
      {
        id: 4,
        text: 'dorian',
        price: 130
      },
      {
        id: 5,
        text: 'elderberry',
        price: 140
      }
    ]
  }
}

なお、オブジェクトにvalueプロパティがある場合、valueプロパティの値がセレクトボックスの値になります。
たとえば、下記のようなオブジェクトの場合、textプロパティが表示ラベル、valueプロパティが値になります。

fruitsObj: [
  {
    id: 1,
    text: 'アップル',
    value: 'apple',
    price: 100
  },
  {
    id: 2,
    text: 'バナナ',
    value: 'banana',
    price: 110
  },
  {
    id: 3,
    text: 'チェリー',
    value: 'cherry',
    price: 120
  },
  {
    id: 4,
    text: 'ドリアン',
    value: 'dorian',
    price: 130
  },
  {
    id: 5,
    text: 'エルダーベリー',
    value: 'elderberry',
    price: 140
  }
]

オブジェクトの任意のプロパティを指定したい場合

itemsプロパティに指定したオブジェクトの任意のプロパティをセレクトボックスの表示ラベルと値にしたい場合は、下記のように記述します。

item-textに表示ラベルにしたいオブジェクトのプロパティ名、item-valueに値にしたいオブジェクトのプロパティ名を指定します。
下記の例ではlabelプロパティを表示ラベルに、nameプロパティを値にしています。

なおitem-valueはオプションで指定しない場合は、item-textに指定した値が表示ラベルと値になります。

<v-card>
  <v-card-title>v-select with object</v-card-title>
  <v-card-subtitle>selected: {{ selected }}</v-card-subtitle>
  <v-card-text>
    <v-select v-model="selected" :items="fruitsObj" item-text="label" item-value="name" name="fruits">
    </v-select>
  </v-card-text>
</v-card>

fruitsObj: [
  {
    id: 1,
    label: 'アップル',
    name: 'apple',
    price: 100
  },
  {
    id: 2,
    label: 'バナナ',
    name: 'banana',
    price: 110
  },
  {
    id: 3,
    label: 'チェリー',
    name: 'cherry',
    price: 120
  },
  {
    id: 4,
    label: 'ドリアン',
    name: 'dorian',
    price: 130
  },
  {
    id: 5,
    label: 'エルダーベリー',
    name: 'elderberry',
    price: 140
  }
]

Comments

[tktail]

ご回答ありがとうございます。
こんなにわかりやすく、素晴らしい回答を頂き、感動しています。

さて早速試してみましたが、やはり[object Object]の表示のままでした。
tableのカラム名も”name”から"value"に変えてみたのですが、他に何か案はありますでしょうか？

ちなみにresponse.data()のところをJSON.stringify(response.data())などと変えてみたりしましたが直りませんでした。

[rubytomato]

少なくとも3カ所おかしいコードがあるのでご確認ください。

■1つ目

data: () => ({
attributes: {}
}

の部分

data: () => ({
attributes: []
}

ではないでしょうか？

■2つ目

axios.get(url).then(function(response){
self.attributes = response.data();
});

の部分

axios.get(url).then(function(response){
self.attributes = response.data;
});

ではないでしょうか？

■3つ目

<v-select
v-model="select"
item-text="attributes"
:items="attributes"
name="attributes"
label="タグ*"
required
>

の部分の item-text="attributes" と記述されていますが、jsonデータの中にattributesというプロパティ名が存在するのですか？
jsonデータの構造が分からないので何とも言えないですが、セレクトボックスに表示する値が格納されているプロパティ名を指定してください。例えばnameであれば、item-text="name" となります。

以上の修正で改善されないようであれば、APIから返ってくるjsonデータの構造を質問内容に追記ください。
データの構造（プロパティ名）が分かればいいので、値はダミーで書き換えてもかまいません。

[tktail]

ご指摘頂きありがとうございます。
コードを書き替えたところ、無事解決することができました！

１つ目⇒配列で渡すのは理解していましたが、参考にしていたURLで｛｝を使っていたので、そのままにしていました。（２つ目を修正するとどちらでも動きました）
２つ目⇒ケアレスミスでした。
３つめ⇒カラム名通り、item-text="value"に変更しました。

的確かつ分かりやすい説明で助かりました。ありがとうございます。