Question

我有一个值不断变化的组件。但是，当它被转换隐藏时，它会停止更新值，这不是我想要的行为。

查看this fiddle或此片段：

＆＃13;

var demo = new Vue({
  el: '#demo',
  data: {
    visible: true,
    counter: 0
  },
  created: function() {
    setInterval(function() {
      this.counter++;
    }.bind(this), 200);
  }
});

＆＃13;

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: 2s ease;
}

[v-cloak] {
  display: none;
}

＆＃13;

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo" v-cloak>
  <p>Value: {{ counter }}</p>

  <transition name="fade">
    <p v-if="visible">Transition: {{ counter }}</p>
  </transition>

  <button @click="visible = !visible">
    Transition!
  </button>
</div>

＆＃13;

正如您所看到的，当您单击按钮时，淡出的段落会冻结当前计数器值，而另一个会继续更新。 如何避免这种情况？我希望渐变段落只有在完全隐藏时才会更新值，转换完成后。

Answer 1

它会冻结，因为destroy会触发v-show事件，因此该组件不存在且无法再绑定。

使用v-if代替User Settings > Account

Modeless Forms

Answer 2

补充@ Sandwell的回答和@Nope的评论，

您可以在转换完成后删除元素。

http://jsfiddle.net/jacobgoh101/5vu7wgj8/4/

<p v-show="visible" v-if="exists" @transitionend="handleTransitionend">

和

new Vue({
    data: {
        // ...
        exists: true
    },
    methods: {
        handleTransitionend() {
            this.exists = false;
      }
    }
});

<强>更新

@HristiyanDodov通过使用transition hook @before-enter和@after-leave在@ Sandwell和我的建议之上构建了一个完整的解决方案。

这是完整的解决方案： http://jsfiddle.net/hdodov/5vu7wgj8/6/

当离开转换处于活动状态时，继续呈现组件

2 个答案: