如何解决为什么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>
解决方法
在普通JS中效果很好...
因此,请尝试着眼于差异:
- TypeScript(我不能在此使用它)-我真的怀疑它的原因,但您可以尝试
- 范围内的CSS-您是否尝试删除了
scoped
?作用域CSS和<transition>
存在一些问题。在Vue-loader
中检查this issue。我的示例不是使用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>
,
我遇到了同样的问题,您可以尝试将 'show' 的初始值设置为 false,并在生命周期中将 'show' 修改为 true。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。