1

v-initで2バイト文字を渡すと、以下のエラーになりますが原因がわかりません。
半角英数字及び、objectであれば渡せます。
vue.js自体がbindでの2バイト文字を許容していないのでしょうか?
phpのblade画面からデータを取得する必要があるため、dataに初期定義することはできません。

v-init="あああ"
Vue warn]: Property or method "あああ" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

v-init="1234"(全角)
- invalid expression: v-init="1234"

customDirective.vue

Vue.directive('init', {
    bind(el, bindings, vnode)
    {
        console.log(el.name, bindings.expression);
        // v-initに渡された値をタグのnameプロパティと同一の名前のv-modelに渡す
        vnode.context[el.name] = bindings.expression ? bindings.expression : '';
    }
});

main.js

var app = new Vue({
    el: '#main',
    data: {
        test: ''
    }
});

html

<main id="main">
    <form>
        <input type="text" name="test" v-init="あああ" v-model="test">
    <form>
</main>

1 件の回答 1

0

サクッと試してみたところ、ダブルクォーテーションの中身が JavaScript の式として一度評価された後に、評価した式の何らかのメソッドを実行しようとするみたいで、式として成り立つものでなおかつ変数なら定義されているものを入れないとダメっぽいです。

なので半角英数字で定義されていない変数名を入れてやると同じエラーを吐きます。

↓のようにシングルクォーテーションで囲ってやるとかして、bindings.value を代入してやれば意図したとおりにいくと思います。

html

<input type="text" name="test" v-init="'あああ'" v-model="test">

customDirective.vue

vnode.context[el.name] = bindings.value ? bindings.value : '';
2
  • 追記: 調べてみたらマルチバイト文字列も変数名として使えるみたいで、式としては一応成り立ってるので、変数として解釈されてしまって、「あああ」という定義されていない変数のメソッドを実行しようとしてエラー吐いてる感じです。
    – user25074
    Commented 2017年8月28日 18:36
  • ありがとうございます、解決いたしました。変数にマルチバイト使えるのですか....
    – user16768
    Commented 2017年8月29日 1:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。