Ошибка привязки данных Vuejs 2
Я не понимаю, почему это не работает, и это сводит меня с ума
<template>
<p>{{ greeting }}</p>
</template>
<script>
export default {
name: 'App',
data: function(){
return {
greeting: 'this is message'
}
}
}
</script>
Почему {{ greeting }} не работает? Следует запустить текст. Но я получил эту ошибку
Errors compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
Кто-нибудь может мне с этим помочь ?
Не могли бы вы поделиться своим файлом main.js, расположенным в папке src? Проблема может быть в функции рендеринга, а не в вашем компоненте приложения.
Согласно сообщению об ошибке, у вас есть несколько элементов в корне. но файл, которым вы поделились, имеет только один корневой элемент, поэтому, пожалуйста, предоставьте более подробную информацию, как указано выше.
Я обнаружил, что после <template> нужно обернуть другой <div>, чтобы он работал. Потратьте несколько часов, чтобы решить эту проблему.
Ответы 1
У вас должен быть <div> с идентификатором app внутри вашего тега <template>
<template>
<div id = "app">{{greeting}}</div>
</template>
<script>
export default {
name: "App",
data: function() {
return {
greeting: "this is message"
};
}
};
</script>
Я тоже узнал об этой проблеме. Работает только после запаковки в <div>. Однако это должно быть упомянуто в документации.
Я не могу воспроизвести это. Вы уверены, что у вас больше ничего нет в
<template>?