Vue.js: загрузка шаблона (или div), когда пользователь нажимает кнопку?

Итак, в настоящее время у меня есть шаблон, который находится в файле ".vue", например:

<template>
  <div id = "dataAttachToMe"></div>
</template>

Я не хочу, чтобы это загружалось, если пользователь не нажимает кнопку, что-то вроде

<button @click = "loadTheTemplateAbove">See Data</button>

Я пробовал использовать этот пример: https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key. Но в сообщении об ошибке написано что-то вроде «Шаблон компонента должен содержать ровно один корневой элемент».

Мне здесь нужно больше, чем просто показать / скрыть, я думаю, что-то, что может запускать шаблон динамически.

<template>
  <div id = "data">
    <button @click = "loadTemplate">Load the template</button>
    <div v-if = "buttonClicked">
      <div id = "dataAttachedToThisDiv"></div>
    </div>
  </div>
</template>
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
2 665
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Возникающая ошибка означает, что внутри тега <template></template> содержится более одного корневого элемента.

В Vue.js (и других фреймворках / библиотеках на основе шаблонов) требуется иметь только один корневой элемент.

Это не буду работа:

<template>
  <div id = "dataAttachToMe"></div>
  <button @click = "loadTheTemplateAbove">See Data</button>
</template>

Эта работа буду:

<template>
  <div id = "someRootDiv">
    <div id = "dataAttachToMe">Some data</div>
    <button @click = "loadTheTemplateAbove">See Data</button>
  </div>
</template>

Вот пример кода (App.vue) того, чего вы пытаетесь достичь:

Edit Vue Template

Основная идея: мы должны создать переменную, которая будет изменяться при нажатии кнопки. Мы добавляем директиву v-if, которая зависит от этой переменной и будет обрабатывать видимость элемента.

Привет @aBiscuit - спасибо за отличный пример. Единственная проблема, с которой я сталкиваюсь, заключается в том, что по какой-то причине мой "<div id = " dataAttachToMe "> </div>" не инициализируется, если он заключен в другой элемент div, если он находится внутри шаблона div сам по себе, он хотя загружается нормально. Как мне инициализировать его, чтобы он, если возможно, "стоял отдельно"?

Michael Teller 25.10.2018 23:33

Не могли бы вы пояснить утверждение "не инициализируется"? Он не отображается в DOM? В консоли все еще есть ошибки?

aBiscuit 25.10.2018 23:45

Привет, aBiscuit - хороший вопрос - сам div появляется в DOM onclick, но не инициализирует данные, прикрепленные к div / id (поэтому экран белый, но если вы проверите элемент в браузере, вы можете увидеть div) . Однако это был просто этот div внутри тегов шаблона, он также инициализировал данные. Я обновил приведенный выше пример кода, чтобы показать вам, что я имею в виду: "dataAttachedToThisDiv" по какой-то причине не инициализируется должным образом.

Michael Teller 25.10.2018 23:49

Я вижу, вы обновили вопрос. Итак, я обновил ссылку на CodeSandbox :) Обратите внимание на динамическую переменную message внутри div. Если элемент с директивой v-if присутствует в DOM, все, что остается, - это добавить некоторый контент внутри элемента. Обратите внимание, что атрибут id обычно избыточен в Vue.js, по крайней мере, из личного опыта.

aBiscuit 25.10.2018 23:55

Привет, aBiscuit, что, если я хочу, чтобы "сообщение" выводило html, а не просто строку? (и спасибо!)

Michael Teller 26.10.2018 00:04

Я снова обновил CodeSandbox. Вы можете использовать строки, HTML, другие компоненты или что-нибудь еще внутри этого div. Пожалуйста, посмотрите в CodeSandbox на использование директивы v-html и установку других компонентов.

aBiscuit 26.10.2018 00:10

Добро пожаловать в StackOverflow. Когда вы получаете сообщение об ошибке Component template should contain exactly one root element, это означает, что в вашем template может быть только один корневой элемент. Вы можете исправить эту ошибку, обернув все в пустой div, вот так

 <template>
  <div>
    <template v-if = "loginType === 'username'">
      <label>Username</label>
      <input placeholder = "Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder = "Enter your email address">
    </template>
  </div>
</template>

Пожалуйста, отредактируйте свой пост и разместите тег <script>. Для условного рендеринга требуется поле данных с логическим значением, которое вы можете поместить в оператор if в шаблоне.

<template>
 <div>
    <div v-if = "show">{{message}}</div>
    <div v-if = "@show">Not Showing when show is set to false</div>
     <button v-on:click = "show = true">Show</button>
 </div>
</template>
<script>
module.exports {
  data: function () {
    message: 'Hello Vue!',
    show: false
  }
}
</script>

Другие вопросы по теме