Exception thrown by Vue code during update with template involving v-if and css styles #4535
Description
Vue.js version
2.1.6
Reproduction Link
Steps to reproduce
Given the following code
<html>
<body>
<div id="vue">
<div style="background: blue;" v-if="!message">Something</div>
<div style="background: red;" v-if="message" v-text="message"></div>
<button v-on:click="buttonClicked">Click me</button>
</div>
<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>
<script>
var vue = new Vue({
el: '#vue',
data: {
message: null
},
methods: {
buttonClicked: function() {
this.message = "Hello @ " + new Date();
}
}
});
</script>
</body>
</html>clicking the button causes the following exception to be thrown in the Chrome Version 55.0.2883.95 (64-bit) console
DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at Object.removeChild (https://unpkg.com/vue@2.1.6/dist/vue.js:3825:8)
at removeVnodes (https://unpkg.com/vue@2.1.6/dist/vue.js:4188:19)
at patchVnode (https://unpkg.com/vue@2.1.6/dist/vue.js:4333:9)
at updateChildren (https://unpkg.com/vue@2.1.6/dist/vue.js:4252:9)
at patchVnode (https://unpkg.com/vue@2.1.6/dist/vue.js:4328:29)
at Vue$3.patch [as __patch__] (https://unpkg.com/vue@2.1.6/dist/vue.js:4451:9)
at Vue$3.Vue._update (https://unpkg.com/vue@2.1.6/dist/vue.js:2224:19)
at Vue$3.<anonymous> (https://unpkg.com/vue@2.1.6/dist/vue.js:2191:10)
at Watcher.get (https://unpkg.com/vue@2.1.6/dist/vue.js:1656:27)
at Watcher.run (https://unpkg.com/vue@2.1.6/dist/vue.js:1725:22)
and all JS execution stops (this is proven by the fact the time does not update with repeated clicks).
Notes
Strangely, the error doesn't happen if you drop the style attributes from the two divs.
Salutation
Thanks! Best regards,
Eric