javascript - 使用 v-html 和 <transition> 时无法读取 null 的属性 '_pending'

Question

我已经与这个错误斗争了几个小时，并设法将其缩小为一个非常简单的脚本。我设法重现了 JSFiddle 中的错误.

我想显示基于给定货币的价格。如果货币是 USD , 仅显示价格。如果是其他价格，则显示转换后的价格(在本例中为 EUR)，并提供点击它并查看原始价格的选项。

正如您在 fiddle 中看到的，如果您更改初始的 USD在输入中可以说，US , 不再满足条件并显示转换后的价格。如果您点击价格，您可以看到原价。

但是，如果您键入 D返回以便货币为USD再次出现错误:

vue.js:1743 TypeError: Cannot read property '_pending' of null
    at performLeave (VM208 vue.js:7827)
    at leave (VM208 vue.js:7817)
    at Array.remove$$1 (VM208 vue.js:7910)
    at removeAndInvokeRemoveHook (VM208 vue.js:5771)
    at removeAndInvokeRemoveHook (VM208 vue.js:5768)
    at removeVnodes (VM208 vue.js:5745)
    at patchVnode (VM208 vue.js:5928)
    at updateChildren (VM208 vue.js:5809)
    at patchVnode (VM208 vue.js:5923)
    at Vue.patch [as __patch__] (VM208 vue.js:6083)

检查 Vue 源代码后，似乎内部 performLeave()方法尝试访问 _pending的 el.parentNode .由于该方法用于转换并且唯一的转换元素是 <span>与 key="a" , 我猜 el是那个元素，所需的父节点是 <span>与 v-if="converted" .

发生这种情况可能是因为我有 v-html在v-else有问题的 parent 。嵌套的子尝试转换，但父的 HTML 已更改，因此子不再具有父？

在 fiddle 或这段代码中自己查看错误:

new Vue({
    el: '#app',
    data: function () {
        return {
            original: '$500',
            currency: 'USD',
            show: true
        };
    },
    computed: {
        converted: function () {
            return (this.currency !== 'USD') ? '€423' : null;
        }
    }
});

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
    <input v-model="currency">
    
    <span v-if="converted" @click="show = !show">
        <transition name="fade">
            <span v-if="show" key="a" v-html="converted"></span>
            <span v-else key="b" v-html="original"></span>
        </transition>
    </span>
    <span v-else v-html="original"></span>
</div>

问题

1. 为什么会出现这个错误？会发生什么？
2. 我该如何解决？

Answer 1

这是 Vue 的一个错误。这是 ticket for the bug on Vue's repo on GitHub .

似乎具有 v-if 的特定组合在第一个跨度上，和 @click="show = !show"事件监听器，和 <transition>标记，和 呈现最后<span> 的内容与 v-html而不是字符串插值导致一些电线交叉并导致 Vue 出错。更改任何这些条件，代码就可以工作。

一个简单的解决方法是使用 v-show="converted"和 v-show="!converted"对于两个外部跨度而不是 v-if和 v-else指令。

Vue 团队建议的解决方法是添加一个唯一的 key像这样给外部 span 元素添加属性:

new Vue({
    el: '#app',
    data: function () {
        return {
            original: '$500',
            currency: 'USD',
            show: true
        };
    },
    computed: {
        converted: function () {
            return (this.currency !== 'USD') ? '€423' : null;
        }
    }
});

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
    <input v-model="currency">
    
    <span v-if="converted" key="a" @click="show = !show">
        <transition name="fade">
            <span v-if="show" key="a" v-html="converted"></span>
            <span v-else key="b" v-html="original"></span>
        </transition>
    </span>
    <span v-else key="b" v-html="original"></span>
</div>