Итак, в настоящее время у меня есть шаблон, который находится в файле ".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>
Возникающая ошибка означает, что внутри тега <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
) того, чего вы пытаетесь достичь:
Основная идея: мы должны создать переменную, которая будет изменяться при нажатии кнопки. Мы добавляем директиву v-if
, которая зависит от этой переменной и будет обрабатывать видимость элемента.
Не могли бы вы пояснить утверждение "не инициализируется"? Он не отображается в DOM? В консоли все еще есть ошибки?
Привет, aBiscuit - хороший вопрос - сам div появляется в DOM onclick, но не инициализирует данные, прикрепленные к div / id (поэтому экран белый, но если вы проверите элемент в браузере, вы можете увидеть div) . Однако это был просто этот div внутри тегов шаблона, он также инициализировал данные. Я обновил приведенный выше пример кода, чтобы показать вам, что я имею в виду: "dataAttachedToThisDiv" по какой-то причине не инициализируется должным образом.
Я вижу, вы обновили вопрос. Итак, я обновил ссылку на CodeSandbox :) Обратите внимание на динамическую переменную message
внутри div. Если элемент с директивой v-if
присутствует в DOM, все, что остается, - это добавить некоторый контент внутри элемента. Обратите внимание, что атрибут id
обычно избыточен в Vue.js, по крайней мере, из личного опыта.
Привет, aBiscuit, что, если я хочу, чтобы "сообщение" выводило html, а не просто строку? (и спасибо!)
Я снова обновил CodeSandbox. Вы можете использовать строки, HTML, другие компоненты или что-нибудь еще внутри этого div. Пожалуйста, посмотрите в CodeSandbox на использование директивы v-html и установку других компонентов.
Добро пожаловать в 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>
Привет @aBiscuit - спасибо за отличный пример. Единственная проблема, с которой я сталкиваюсь, заключается в том, что по какой-то причине мой "<div id = " dataAttachToMe "> </div>" не инициализируется, если он заключен в другой элемент div, если он находится внутри шаблона div сам по себе, он хотя загружается нормально. Как мне инициализировать его, чтобы он, если возможно, "стоял отдельно"?