Как получить атрибуты из outerHTML в качестве props при создании экземпляра Vue?

Question

[LionG]

По идее должно работать так:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app" :sometext="'hello world'"></div>
<script type="text/javascript">
new Vue({
	props: ['sometext'],
	mounted: function () {
		console.log(this.sometext)
	}
}).$mount('#app')
</script>

Однако в консоль выбивает undefined.

Есть вариант вручную подгружать данные из атрибутов, но по моему это какой то костыль и должно работать иначе.

beforeMount: function () {
		this.sometext = this.$el.attributes.sometext.value
	},

Answer 1

[Dima Polos]

Вы на корневой узел в html пытаетесь директивы vue повесить, поэтому не получается. Можете сделать у него data-sometext="blabla", и потом через $el попытаться прочитать атрибуты этого узла DOM. Только вся эта затея выглядит как костыль, Вам точно это нужно именно корневому элементу данные слать? Внутри компонентов ниже по дереву от корневого компонента пропсы будут работать без проблем.

Comments

[LionG]

Приложение отправляется на prerender что бы получить "скелет", а перед отправкой на клиент нужно подставить некоторые пропсы используя которые клиент перерендерит зависимые элементы. Внутри родителя server rendered.

[Dima Polos]

LionG, любой первый рендер возьмет div#app как узел DOM, и на нем vue еще не работает, только внутри начнется вся работа рендера. Так что, замените данные на data-props. Если туда надо как-то передать данные, то может передать их через шаблонизатор, в момент сборки статики. Тут я не уверен, но я бы так сделал.