0

テンプレートを作成しました：

<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

どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

1

それ自体の外部で vue インスタンスのデータを使用しています。同じファイルisShowing内でのみ使用できます。<template>.vue

例えば：

<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>
于 2017-11-28T01:42:46.077 に答える