Блог

Главная - Вопросы по программированию - Ошибка привязки данных Vuejs 2

Ошибка привязки данных Vuejs 2

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

Я не понимаю, почему это не работает, и это сводит меня с ума

 <template>
    <p>{{ greeting }}</p>
</template>

<script>
    export default {
        name: 'App',
        data: function(){
          return {
            greeting: 'this is message'
          }
        }
    }
</script>

Почему {{ greeting }} не работает? Это должен быть текст запуска. Но я получил эту ошибку

Ошибки при компиляции шаблона:

Шаблон компонента должен содержать ровно один корневой элемент. Если вы используете v-if для нескольких элементов, используйте вместо этого v-else-if для их объединения.

Кто-нибудь может мне помочь с этим?

Комментарии:

1. Я не могу воспроизвести это. Вы уверены, что у вас больше ничего нет в вашем <template> ?

2. Не могли бы вы поделиться своим main.js файлом, расположенным в src папке? Проблема может быть в функции рендеринга там, а не в вашем компоненте приложения.

3. Согласно сообщению об ошибке, у вас есть несколько элементов в root. но файл, которым вы поделились, имеет только один корневой элемент, поэтому, пожалуйста, предоставьте более подробную информацию, как указано выше

4. я обнаружил, что после <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>

Комментарии:

1. Я тоже обнаружил эту проблему. Работает только после обертывания с помощью <div>. Однако об этом следует упомянуть в документации.