Menu
Looking at this simple hello world html page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
When served as a static page it will show the Message is Hello World! text on the page. If I add a render function to the Vue declaration
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
return h("p", "Rendered " + this.message);
}
})
</script>
</body>
</html>
It will show Rendered Hello World! inside a <p> element, erasing whatever was present inside the <div> element. Now my question is, what if I want the render function to perform the default rendering under certain conditions, ie. show the Message is Hello World! text? Something like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
if (this.message === "Hello World!") {
/* do something to make the render function fallback to default rendering? */
} else {
return h("p", "Rendered " + this.message);
}
}
})
</script>
</body>
</html>
I'm aware that I can achieve this kind of effects in different ways, I'm just wondering if it's possible to tell Vue to revert back to the default fallback rendering mechanism inside the render function, or not?
====== EDIT ======
Just to clarify some more, I'm NOT looking for solutions like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
if (this.message === "Hello World!") {
return h("p", "Message is " + this.message);
} else {
return h("p", "Rendered " + this.message);
}
}
})
</script>
</body>
</html>
I'm wondering if somehow you can halt the render function without returning any rendered content and make Vue to show the default rendering like there's no render function declared at all.
313
You could compile the template string yourself. It can be accessed by instance property $el.innerHTML. Then you could call Vue.compile to compile the template string.
More about compile: https://v2.vuejs.org/v2/api/#Vue-compile
Somethink like this:
if (this.message === 'Hello World!') {
return Vue.compile(this.$el.outerHTML).render.call(this, h)
/* do something to make the render function fallback to default rendering? */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
