如何使用 vue-cli 将数据渲染到 DOM答案

【问题标题】：How to Render Data to the DOM using vue-cli如何使用 vue-cli 将数据渲染到 DOM
【发布时间】：2018-05-11 05:50:00
【问题描述】：

我已经创建了一个模板：

<template>
<div>
<slot></slot>
</div>
</template>

<script>
export default {
 data() {
   return {
    isShowing: false 
   }
 },
methods: {
toggleShow: function() {
  this.isShowing = !this.isShowing;
  setTimeout(() => {
    this.toggleShow1();
  }, 800);
  }
}
<script>

<style>
  ..
</style>

在 HTML 文档中，我只想在 isShowing 设置为 true 时切换标题：

<div v-if="isShowing">
   <div>
       <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
   </div>
</div>

然后我得到这个错误：ReferenceError: isShowing is not defined

任何帮助将不胜感激。谢谢！

【问题讨论】：

你在 Vue 之外使用 v-if 吗？你是如何使用 vue-cli 的？你在用什么 webpack 或 browserify？这里没有足够的人来回答你的问题。
@jostrander 是的，我在 Vue 之外使用 v-if，并且我正在使用 webpack 来捆绑我的所有脚本。我也没有使用 vuex 或 vue-router。
data 方法中返回的对象没有右括号}
@thanksd 刚刚添加了上面缺少的括号。感谢您指出了这一点。但是，问题仍然存在。
我很困惑，组件的模板（带槽）和你帖子底部的HTML sn-p是什么关系？

标签： templates vue.js components vue-cli

【解决方案1】：

您正在使用自身之外的 vue 实例数据。 isShowing 只能在同一个.vue 文件的<template> 内使用。

例如：

<template>
<div>
  <div v-if="isShowing">
    <slot></slot>
 </div>
</div>
</template>

<script>
export default {
 data() {
   return {
    isShowing: false 
   }
 },
methods: {
toggleShow: function() {
  this.isShowing = !this.isShowing;
  setTimeout(() => {
    this.toggleShow1();
  }, 800);
  }
}
<script>

<style>
  ..
</style>

【讨论】：

但是由于我将所有功能都导入到 index.html 文件中，我不能只使用
Main Heading here
of-template> 然后模板 NameOfTemplate.vue （上面的那个）会处理其余的？
不幸的是它不起作用。使用 isShowing is index.html 会抛出“isShowing not defined”错误。

Main Heading here