Я начал использовать vuejs с посылкой. У меня есть основной компонент App.vue, из которого я вызываю подкомпонент Hello.vue, используя <Hello/> в шаблоне приложения. У меня странная ошибка, если я не помещаю <Hello/> внутри тега div, все, что появляется в html, не отображается. Код ниже:
index.js
import Vue from "vue";
import App from "./App";
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
App.vue
<template>
<div id="app">
<h3>bla bla</h3>
<div><Hello/></div>
<!-- if not put inside a div, hides everything after-->
<h2>test</h2>
<p>kldsfnlkdsjfldsfds</p>
<h5>skjdnsqkfdnlkdsqf</h5>
</div>
</template>
<script>
import Hello from "./components/Hello";
export default {
name: "App",
components: {
Hello
}
};
</script>
<style>
</style>
Hello.vue
<template>
<div>
<h1>{{ message }}</h1>
<h2>Hello {{ person.firstname}} {{person.lastname}}</h2>
<label>
Firstname:
<input type="text" v-model="person.firstname">
</label>
<label>
Lastname:
<input type="text" v-model="person.lastname">
</label>
<label>
Message:
<input type="text" v-model="message">
</label>
</div>
</template>
<script>
export default {
data() {
return {
person: {
firstname: "John",
lastname: "Doe"
},
message: "Welcome !"
};
}
};
</script>
<style>
</style>
Вот скриншот того, что я получаю без упаковки <Hello/> с <div></div>
А потом с div:
Спасибо!
РЕДАКТИРОВАТЬ: я не получаю ошибку в консоли. Я забыл добавить, что я пробовал с веб-пакетом, и я не получаю эту ошибку, так что это, скорее всего, связано с посылкой.