Vue.js:用户单击按钮时加载模板(或 div)？

Question

所以我目前有一个模板位于“.vue”文件中，如下所示:

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

我不想加载它，除非用户点击按钮，比如

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

我试过使用这个例子:https://v2.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>

Answer 1

您遇到的错误意味着<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依赖于该变量并将处理元素可见性的指令。