ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему vuejs не биндит данные?

Использую vueify + browserify. В консолях ошибок нет. Просто не рендерит {{hello}}
<template>
	<div class="v-steplist">
		<div class="v-steplist__header">
			<h3>{{ hello }}</h3>
			<div class="v-steplist__edit-step"></div>
		</div>
		
		<div class="v-steplist__content">
			<div class="v-steplist__step"></div>
		</div>
	</div>
</template>




<script>
	const Vue = require("vue/dist/vue.js");
	Vue.component("v-steplist",{
		data: function (){
			return {hello: 'greet'}
		}
	})
</script>


Основной экземпляр:
let vueMigrate = function(){
	const Vue = require("vue/dist/vue.js");

	let rootSteplist = document.querySelector("#v-steplist")
	if(rootSteplist){
		new Vue({
			el: '#v-steplist',
			components: {
				vSteplist: require("../_modules/components/vue-components/vue-steplist/steplist.vue")
			}
		})
	}
}
module.exports = vueMigrate

Что я делаю не так?
#v-steplist существует. В нём компонент - рендерится с пустым h3

UPD
решил проблему объявлением данных в экземпляре Vue и явным биндингом в компонент.
Помог нужный кусок доков
На самом деле я изначально неправильно подошёл к структуре. Данные нужно прокидывать от корня.
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov
Vue.js Frontend Developer
А что вы ждете? У вас hello в компоненте v-steplist, а самого компонента в разметке нет.
Ответ написан
Xuxicheta
@Xuxicheta
инженер
попробуйте оформить все аккуратней. https://codesandbox.io/s/jz6nyvnl1v
Не знаю умеет ли browserify ES6 import, но исправить недолго.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы