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

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

0 голосов
/ 26 октября 2018

Итак, в настоящее время у меня есть шаблон, расположенный в файле ".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>

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Добро пожаловать в 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>
0 голосов
/ 26 октября 2018

Полученная ошибка означает, что внутри тега <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, которая зависит от этой переменной и будет обрабатывать видимость элемента.

...