0

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>
Eino Gourdin
  • 4,169
  • 3
  • 39
  • 67
  • btw do you see any errors in DevTools? – Michal Levý Sep 24 '20 at 14:01
  • @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 Sep 24 '20 at 14:17
  • I copy and paste the code into [CodeSandbox](https://codesandbox.io/s/exciting-lichterman-zbwcb?file=/src/components/HelloWorld.vue) and the data binding works properly. Please check the main.js. – Chris Wong Apr 29 '21 at 06:37

2 Answers2

1

It works just fine in plain JS...

So try to focus on the differences:

  1. TypeScript (i cannot use it here on SO) - I really doubt its the cause but you can try
  2. 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>
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
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.

xiao
  • 1