Smartyの変数をVueのコンポーネントに渡す時のまとめ

SmartyからVueに変数を渡すときは、PHPでjson_encodeをしてから、テンプレートに渡します。

json_encodeをしないと、おかしな挙動をします。※参考

index.html

// v-bindを用いて、文字列のurlを渡します
// ダブルクオートだとバグります
// シングルクオートで渡しましょう
<Example :url='{$url}'></Example>

以下のようにして、Vueのコンポーネントでpropsとして受け取ります。

example.vue

export default defineComponent({
    props: {
        url: { required: true, type: String },
    },
})

参考

PHPでjson_encodeをせず、Vueで変数を受け取ってconsole.logすると、以下の結果になります。

• 文字列の場合
  undefinedになります。

• 真偽値の場合

  • trueのとき、1になります。
  • falseのとき、trueになります。

• nullの場合
  空文字になります。

• int型の場合
  number型の数値になります。

• 配列の場合
  ƒ Array() { [native code] }になります。

• オブジェクトの場合
  ページが壊れます。