ルートVueインスタンスのプロパティ

こんな感じにroot Vue instanceのpropsを使って初期値とかを与えたい場合があったりします。

• html

<div id='root' props='initial-value'>

• javascript

const vm = new Vue({
    el: '#root',
    props: ['initialValue'],
    data: {
        value: '',
    },
    beforeMount: function() {
        this.value = this.initialValue;
    }
});

が、これだとthis.initialValueはundefinedになります。

原因は、propsは親から子にデータを渡すためのもので、親のないroot vue instanceでは使えないようでした

Passing props to root instance · Issue #6440 · vuejs/vue · GitHub

対策1

真っ当な対策としてはroot vlue instanceのpropsを使って値を渡すのではなく、 rootに子コンポーネントを作って、子コンポーネントのpropsを使うです。

対策2

どうしてもrootで渡したい場合は、強引なやり方ですが、elementのattributesから取ってくれば一応とれます

const vm = new Vue({
    el: '#root',
    data: {
        value: '',
    }
    beforeMount: function() {
        this.value = this.$el.attributes['initial-value'].value;
    }
});