转换 vuejs 未捕获 RangeError：超出最大调用堆栈大小

Question

我正在学习 vuejs 中的转换。我正在 vuejs 中创建转换并收到错误“超出最大调用堆栈大小”，但如果我注释掉代码，它会正常工作。我仍然没有找到原因。请帮助我

<template>
  <div>
    <div>Transition</div>
    <button @click="toggleShow">Show</button>
    <transition name="fade">
      <div v-if="show" class="card"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Transition",
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggleShow() {
      console.log("Button clicked, current show value:", this.show);
      this.show = !this.show;
      console.log("New show value:", this.show);
    }
  }
};
</script>

<style scoped>
.card {
  width: 100px;
  height: 100px;
  background-color: red;
}

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 1s;
}
.fade-leave {

}
.fade-leave-active {
  transition: opacity 1s;
  opacity: 0;
}
</style>

Answer 1

代码的主要问题是您可以将组件命名为“

Transition

”