0

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

我在下面粘贴了一个示例代码。问题是在编辑名称时，{{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>
4

2 回答 2

1

它在普通的JS中工作得很好......

因此，请尝试关注差异：

  1. TypeScript（我不能在这里使用它） - 我真的怀疑它的原因，但你可以试试
  2. Scoped CSS - 您是否尝试删除scoped？作用域 CSS 和<transition>. 在 中检查此问题Vue-loader。我的示例不是使用 Webpack 构建的，因此Vue-loader未使用，但肯定会在您的项目中使用...

const app = Vue.createApp({
  data() {
    return {
      name: "",
      show: true,
    }
  },
  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>
  `
}).mount("#app");
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
<div id="app"></div>

于 2020-09-24T13:22:03.090 回答
0

我遇到了同样的问题，您可以尝试将“show”的初始值设置为 false，并在生命周期中将“show”修改为 true。

于 2021-05-25T09:31:37.730 回答