v-bindの使い方（vue.js）

初めに

vue.jsのv-bindを使用して実装したので備忘録として残します。

v-bind のポイントは、一方通行。
値を一方通行に渡すことができる機能です。
（vue側からHTML側の一方通行）

環境

開発環境	バージョン
Laravel	10.1.5
PHP	8.2.3
vue.js	3.2.47

実装

利用停止ボタンを実装しました。
Controller側から持ってきたデータが
　　　存在する場合は、ボタン押下可能、
　　　存在しない場合は、ボタン押下不可にします。

HomeController.php

// ... 略

public function index(Request $request)
{
    // ... 略

    // 配列に格納する
    $param = [
        'set_info' => '渡したい値',
    ];

    return view('home')->with($param);
}

home.blade.php

<div id="set-form">
    <component_a :already_set_info="{{ json_encode($set_info) }}"></component_a>
</div>

渡された値（set_info）が存在するかどうか判別した後に、disableのbooleanを設定します。

ConponentA.vue

<template>
    // ... 略

    <button
        type="button"
        class="btn btn-danger stop-button"
        v-bind:disabled="is_disabled"
    >
        <div class="body">利用停止する</div>
    </button>
</template>

<script>
    export default {
        props: ['already_set_info'],
        data() {
            return {
                is_disabled: true,
            };
        },
        mounted: function() {
            // 渡された情報が存在する場合
            if(this.already_set_info) {
                    this.is_disabled = false;
                }
            }
        },
    };
</script>

値の渡し方がわからなかった方は、こちらの記事にて解説しております。

最後に

最後まで閲覧いただきありがとうございました。
ご意見、ご指摘ありましたら、コメントお願いいたします。