为什么Vue3过渡会中断数据绑定？

问题描述

这个问题我已经打了几个小时了；我不明白为什么它不能按预期工作。

我在下面粘贴了一个示例代码。问题是编辑名称时，{{name}}不会更新。但是，如果删除<transition>元素或v-if="show"条件之一，则数据绑定将按预期工作。如果将{{name}}放在过渡之外，则相同。

所以过渡似乎阻止了数据绑定？但是我在文档中没有找到任何关于它的内容，否则。我在Vue2游乐场中测试了此代码，它可以按预期工作（数据绑定有效）。因此，行为似乎取决于Vue3。

有什么我想念的吗？这是Vue3中的错误吗？

在此先感谢您的任何意见或想法。

<template>
  <div id="demo">
    <button v-on:click="show = !show">
      Toggle
    </button>

    <transition name="fade">
      <div v-if="show">
        <p>hello,{{name}}</p>
        <input v-model="name" type="text" />
      </div>
    </transition>
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      name: "",show: true,}
  }
});
</script>

<style scoped>
.fade-enter-active,.fade-leave-active {
  transition: opacity 0.8s ease;
}

.fade-enter-from,.fade-leave-to {
  opacity: 0;
}
</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue-transitions vue.js vuejs3