1

要在 Vue 更新 DOM 后做某事，您可以使用$nextTick绑定。

要在 css 转换完成后做某事，你可以使用transitionendevent.

我有一个动态列表，其中通过用户操作添加和删除内容。移除后，会有一个 CSS 动画，然后我需要在元素消失后立即检查 DOM 的状态。

我在想，在列表项被删除$nextTick后transitionend， DOM 的状态将是 DOM 的状态，但事实并非如此。

在过渡结束并且列表中的元素已从 DOM 中删除后，我需要做一些事情。

现在我有：

<transition-group class="message-bus" tag="ul" name="message-bus">
    <li v-for="message in messages" v-bind:key="message.id" :ref="message.id">
        <div>{{message.text}}</div>
        <a class="dismiss-message" @click="dismissMessage(message)">&times;</a>
    </li>
</transition-group>

dismissMessage(message){
    const vm = this;

    this.$refs[message.id][0].addEventListener("transitionend", function(){
        vm.$nextTick(function(){
            //This is called, but appears to be called before the element is actually removed from the DOM
            //I need to query the DOM immediately after this element is removed 
        });
    });

    this.messages.splice(this.messages.indexOf(message), 1);

}
4

2 回答 2

1

也许您可以使用自定义指令。unbind在钩子内执行您需要的操作..

created() {
    this.vm = this
},
directives: {
  foo: {
    unbind(el, binding) {
      // Here you can perform the actions you need.
      // You can access the Vue instance using binding.value (eg: binding.value.$el)
    }
  }
},

在你的模板中..

<transition-group class="message-bus" tag="ul" name="message-bus">
    <li v-for="message in messages" v-bind:key="message.id" :ref="message.id" v-foo="vm">
        <div>{{message.text}}</div>
        <a class="dismiss-message" @click="dismissMessage(message)">&times;</a>
    </li>
</transition-group>
于 2019-07-23T15:56:25.760 回答
1

在挂载功能中，我添加了一个MutationObserver似乎可以根据需要工作的功能。我将把它放在这里作为答案，因为它在技术上确实有效并且可能对其他人有帮助，但如果 Vue 有为此内置的东西，我仍然对更好的答案感兴趣。

mounted(){
    const vm = this;
    const listItemRemoved = new MutationObserver(function(e){
        if (e[0].removedNodes.length){
            console.log("Removed");
        }
    });
    listItemRemoved.observe(this.$el, {childList: true});
}
于 2019-07-23T15:01:05.033 回答