Почему не работает директива v-html?

Question

[Никита Кит]

Я хочу вывести разметку svg иконки внутрь блока, созданного в компоненте, в который я через props доставляю эту иконку.

<script>
	var Vue = require("vue/dist/vue.js");
	vHeader = Vue.component("vheader", {
		props: ['icons'],
		created: function(){
			console.log(this.$props);
		}
	});
	module.exports = vHeader;
</script>
<template>
	<header class='header'>
		<div class='plate row row--center-y row--between-x'>
			<div class='header__logo' v-html='icons.projectMenu'></div>
		</div>
	</header>
</template>

В Vue DevTools props есть, вывел в консоль при в колбэке created - тоже есть. Но на страницу не рендерится. Ошибок нет ни в терминале, ни в браузере. Код экземпляра (осторожно - кофе. я не сплю в 5м часу ночи):

Vue = require "vue/dist/vue.js"
axios = require 'axios'
class VueEntry
	init: ->
		new Vue 
			el: "#vhead"
			data: ->
				return "icons": {}
			components: 
				"vheader": require("./header/header.vue")
			created: ->
				that = this
				axios.get('/jsondata/etc/icons.json')
					.then (resp) ->
						Object.assign that.$data.icons, resp.data
					.catch (err) ->
						console.log err


module.exports = VueEntry

Answer 1

[Евгений]

Не очень понимаю как у вас устроено, но скажу точно. Добавляемые в объект новые параметры реактивно не отслеживаются подробнее тут
Как вариант получать данные промисом

Comments

[Никита Кит]

я и получаю промисом.
Скинул две иконки в компонент двумя разными props - и заработало.

new Vue 
			el: "#vhead"
			data: ->
				return {
					"logo": "",
					"projectMenu": ""
				}
			components: 
				vheader: require("./header/header.vue")
			created: ->
				that = this
				axios.get('/jsondata/etc/icons.json')
					.then (resp) ->
						# data = JSON.parse resp.data
						Object.assign that.$data, resp.data
					.catch (err) ->
						console.log err
vheader(:logo='logo', :project-menu='projectMenu')
<script>
	var Vue = require("vue/dist/vue.js");
	vheader = Vue.component("v-header", {
		props: ['logo', 'project-menu'],
		created: function(){
			console.log(this.$props);
		}
	});
	module.exports = vheader;
</script>
<template>
	<header class='header'>
		<div class='plate row row--center-y row--between-x'>
			<div class='header__logo' v-html='logo'></div>
			<div class='header__menu' v-html='projectMenu'></div> 
		</div>
	</header>
</template>

Меня либа эта уже неоднократно удивляла странным поведением, хотя я понимаю что она на proxy и нужно задавать начальное значение, всё равно - больше недели на ней не попишу - сяду и сижу полночи за одним багом

[Антон Швец]

Никита Кит,
еще пока нет же

В: Ведется ли работа над Vue 3.0? Если да, то каковы ключевые изменения?
O: У нас есть планы на 3.0, но пока что ничего определенного. Ближайший большой релиз — это ветка 2.x-next, которая полностью совместима по возможностям с 2.x, но в ней внутренняя система реактивности переписана на ES2015 Прокси. Это улучшит производительность и позволит избавиться от некоторых ограничений существующей реализации (например, отслеживание изменений в объектах и массивах — прим. пер.). Мы прекратим поддержку IE11 и ниже, но позволим использовать последние возможности ES2015 для более эффективного кода.