トップ > vue > 【Vue】コンポーネントのプロパティの初期値にバックエンドから値を代入する

【Vue】コンポーネントのプロパティの初期値にバックエンドから値を代入する

vue php laravel

Vueとバックエンドで共通の値を使いたい時があります。

シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。
しかし、設定値のためだけにAPIを使うと言うのは実装するのも管理するのも面倒ですし、何より通信頻度が増えるので紐づくシステムの遅延につながります。

簡単なデータであれば初期値として代入したいものです。

今回は初期値の渡し方について触れます。

環境

ライブラリ名 バージョン
Vue 2.6.11
PHP 7.1.19

単一データ

単一のデータであればコンポーネントのプロパティに値を代入すれば値を渡せます。
ただし、そのまま値を代入すると論理値（bool）も整数（number）もその他型も、文字型として扱われる場合がありますので代入の仕方には注意が必要です。

文字の場合

<?php
    $text = '初期値';
?>

<div id="app">
    <child text="<?= $text ?>">
</div>

<!-- Vueのライブラリ読み込みは省略 -->
<script>
    Vue.component('child', {
         props: {
             text: String 
         }
    })

    var app = new Vue({
         el: "#app"
    })
</script>

文字以外の場合

文字型以外のプロパティを指定する場合は、json形式にエンコードします。
例えば次は論理値の代入についてです。

<?php
    // 今回はbool値を設定しましたが、空の変数やnullの場合もfalseとして扱うとします。
    $isError = false;
?>

<div id="app">
    <!-- プロパティの指定はシングルコーテーションで囲みます -->
    <child :is-error='<?= json_encode(boolval($isError)) ?>'>
</div>

<!-- Vueのライブラリ読み込みは省略 -->
<script>
    Vue.component('child', {
         props: {
             isError: Boolean 
         }
    })

    var app = new Vue({
         el: "#app"
    })
</script>

論理値を例にしましたが、例えば整数型でも同じ様にjson_encodeすれば代入できます。

Laravelの場合

bladeテンプレートでは、@jsonディレクティブが用意されています。
上記のjson_encodeの処理を@jsonディレクティブに書き換える事で対応できます。

@jsonディレクティブは、Vueコンポーネントやdata-*属性を生成するのにも便利に使えます。

html <example-component :some-prop='@json($array)'></example-component>

Bladeテンプレート JSONのレンダ より

readouble.com

配列データ

配列の場合はjson形式に変換してプロパティに渡します。
引数がjsonの場合、ArrayではなくObject扱いになります。

プロパティのtypeはObjectとして扱います。

<?php
    $options = [
        1 => 'りんご',
        2 => 'みかん',
        3 => 'ぶどう',
    ];
?>
<div id="app">
    <child :options='<?= json_encode($options) ?>'>
</div>

<!-- Vueのライブラリ読み込みは省略 -->
<script>
    Vue.component('child', {
         props: {
             options: Object 
         }
    })

    var app = new Vue({
         el: "#app"
    })
</script>

laravelの場合は、こちらも同様に@jsonディレクティブでエンコード出来ます。

コンポーネント内での使用例

配列の様に扱えますので、次の様にselectタグのoptionにしようする事ができます。

<template>
    <select>
        <option v-for="(value, key) in options" :value="value"> {{ key }}
    </select>
</template>

©︎2017-2018 WebSandBag