Laravel+Vue.js optionやselectタグの選択肢をテーブルから取得

2022年10月6日 2022年10月6日

optionタグの選択肢をこんな風に作りたい。

↓上記の内容は事前に用意したデータベース（mysql)から取得したい。

vue.js側

Javascript部分

//hoge.vue  
data() {
    return {
        selected: [], // Must be an array reference!
        options: [],
        };
        },
methods: {
    getRejectedReasons() {
        axios.get("/api/stocks/getRejectedReasons").then(response => {
            this.options = []
            let options = response.data;

            options.filter((options) => {
                this.options.push({
                    value: options.reason,
                    text: options.reasonText,
                });
            });
        })
    }
},
mounted() {
    this.getRejectedReasons()
}

選択した内容のvalueが、this.selectedという変数に格納される設計にしている。

データベースからレコードごとにvalueカラムとtextカラムを取得して、this.optionsというオブジェクト配列に格納する。

this.optionsをconsole.logで確認すると、

こんな風になる。

html部分

//hoge.vue
<b-form-group label="理由" v-slot="{ ariaDescribedby }">
    <b-form-checkbox-group v-model="selected" :options="options"
        :aria-describedby="ariaDescribedby" name="flavour-2a" stacked>
    </b-form-checkbox-group>
</b-form-group>

bootstrap-vueというフレームワークの書き方なので、いい感じに修正してほしい。

変数optionsの中身はオブジェクト配列で、選択肢ごとのvalueとてtextが格納されている。
selectタグの時もやることは大して変わらない。

Laravel側

コントローラー

//HogeController.vue
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Rejected_reason;

class ApprovalController extends Controller
{
    public function getRejectedReasons(Request $request,Rejected_reason $Rejected_reason){
        $Rejected_reason = $Rejected_reason->all();
        return $Rejected_reason;
    }
}

モデル

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Rejected_reason extends Model
{
    protected $guarded = ['id'];
    use HasFactory;
}

モデルはあんまり触ってない。