Why does this Vue3 transition break data binding?

Question

I have this issue I've been hitting for hours now; I can't understand why it doesn't work as expected.

I pasted an example code below. The issue is that when editing the name, {{name}} is not updated. However, if I remove either of the <transition> element or the v-if="show" condition, then data binding works as expected. Same if the {{name}} is placed outside the transition.

So it seems the transition blocks data binding? However I don't find anything about it in the docs or elsewere. I tested this code in a Vue2 playground, and it works as expected (data binding works). So the behavior seems to depend on Vue3.

Is there something I'm missing? Is it a bug in Vue3?

Thanks in advance for any input or idea.

<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>

@MichalLevý, no error. However by testing some more I noticed two things: after changing the value in the input, the inspecto doesn't show changes, but by selecting the component in the inspector, this view is updated. Second thing is, by toggling the show attribute off and on, changes are shown. So it would seem the transition is blocking the view's refresh — Eino Gourdin
– Eino Gourdin, Commented Sep 24, 2020 at 14:17
I copy and paste the code into CodeSandbox and the data binding works properly. Please check the main.js. — Chris Wong
– Chris Wong, Commented Apr 29, 2021 at 6:37

Michal Levý · Accepted Answer · 2020-09-24 14:01:11Z

1

It works just fine in plain JS...

So try to focus on the differences:

TypeScript (i cannot use it here on SO) - I really doubt its the cause but you can try
Scoped CSS - did you tried to remove scoped ? There are some issues with scoped CSS and <transition>. Check this issue in Vue-loader. My example is not build with Webpack so Vue-loader is not used but it's for sure used in your project...

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>

edited Sep 24, 2020 at 14:01

answered Sep 24, 2020 at 13:22

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eino Gourdin Over a year ago

Indeed, it's very strange.

xiao · Accepted Answer · 2021-05-25 09:31:37Z

0

I meet same question, you can try to set the initial value of 'show' to false and at the lifeCycle to modify 'show' for true.

answered May 25, 2021 at 9:31

xiao

1

Collectives™ on Stack Overflow

Why does this Vue3 transition break data binding?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related