月別アーカイブ: 2018年10月

vue.jsでなぜかdataの要素がundefinedになってしまう(涙

mixinする共通コンポーネントがあるんですけどね、
そのコンポーネント内部で使用するプライベート変数を、
プライベートだと分かりやすいように先頭にアンダースコアを付けて定義してたんですよ。

例えばこんな感じ↓

export default {
    mounted() {
        console.log("_testcode is " + this._testcode);
    },
    data(){
        return {
            _testValue:"abc",
            _testArray:[],
        }
    }
}

このようなコンポーネントをマウントすると当然
「_testcode is abc」
ってコンソールに表示されて欲しいんだけど、
なぜか
「_testcode is undefined」
って表示されちゃう。なんでだよっ!!

配列も”[]”で初期化されていると思って

_testArray.push("おにぎり")

とかすると
「 Cannot read property ‘push’ of undefined 」
とか言われて怒られちゃう!

https://vuejs.org/v2/api/#data
によると

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property.

ってことなので、
this.$data._testArray.push("おにぎり")
とすればOK

でも面倒なので適当なプリフィックスを決めて、使った方が良さげですね。