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 でも面倒なので適当なプリフィックスを決めて、使った方が良さげですね。