37549


v-initで２バイト文字を渡すと、以下のエラーになりますが原因がわかりません。  
半角英数字及び、objectであれば渡せます。  
vue.js自体がbindでの２バイト文字を許容していないのでしょうか？  
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="１２３４"（全角）**  
\- invalid expression: v-init="１２３４"

customDirective.vue

[code]

    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 : '';
        }
    });
    
[/code]

main.js

[code]

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

html

[code]

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


CC BY-SA 3.0
2017-08-28T05:14:03.510
37539
2017-08-28T18:27:28.953
2017-08-28T05:31:28.290
16768
16768
question
javascript vue.js
vue.jsのcustomDirectiveで全角がbindできません


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

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

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

### html

[code]

    <input type="text" name="test" v-init="'あああ'" v-model="test">
    
[/code]

### customDirective.vue

[code]

    vnode.context[el.name] = bindings.value ? bindings.value : '';
    
[/code]


CC BY-SA 3.0
2017-08-28T18:27:28.953
37549
2017-08-28T18:27:28.953
25074
37539
answer