Cobertos

Vue.js render() and $slots; Corrupt DOM

Just ran into an issue today when making a component with a custom render() function and messing around with vnodes passed in via $slots. A seemingly simple template produced really odd results where some DOM elements would disappear, some would be duplicated, some would be out of order, and others would have their inner content ripped out to their outside after a few rerenders. Small template tweaks would also produce vastly different output, sometimes seemingly correct output.

You can see an example in this codepen:

See the Pen Vue.js $slots with and without v-bind:key by Peter "Cobertos" F. (@cobertos) on CodePen.

Fix

After hours of debugging I found assigning a v-bind:key to every element fixes it, kind of like how v-for needs a v-bind:key to work properly.

You can do that using this snippet:

{
    created: function(){
        //Give each vnode in your slot a key using forEach index
        this.$slots.default.forEach(function(vNode, index){
            vNode.key = index;
        });
    }
}

Vue's reactivity and element reuse can be seamless and magical for most uses but sometimes it really just bites you in the ass, kind of like this case.

ConEmu with %CD% in bash

ConEmu is cool and if you haven't used it or any tool built on it (like cmder) then you've…

Is WebAssembly faster than vanilla Javascript?

I keep seeing GitHub issues of people just like me trying to figure out what WebAssembly (Wasm) and previouslyasm.…