Replies: 1 comment
-
|
I was able to create a working solution for Vue2 in case anyone is interested, it was actually much more simpler than I thought: <!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue2-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return ({
'/a.vue': `
<template>
<i> a </i>
</template>
`,
'/b.vue': `
<template>
<b> b </b>
</template>
`,
})[url] || Promise.reject( new Error(res.statusText) );
},
addStyle() { /* unused here */ },
}
const { loadModule } = window["vue2-sfc-loader"];
const app = new Vue({
template: `
<div>
<button
@click="currentComponent = currentComponent === 'a' ? 'b' : 'a'"
>toggle</button>
dynamic component: <component :is="comp"></component>
</div>
`,
computed: {
comp() {
const currentComponent = this.currentComponent; // the trick is here
return () => loadModule(`/${ currentComponent }.vue`, options);
// or, equivalently, use Function.prototype.bind function like this:
// return (url => loadModule(url, options)).bind(null, `/${ this.currentComponent }.vue`);
}
},
data() {
return {
currentComponent: 'a',
}
}
})
app.$mount('#app');
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Is there an example of how to best leverage the Dynamic Component example under Vue2?
For reference:
In the documentation example (first link), the main part that I am a bit confused about is the computed block:
From other discussions it seems the following may be equivalent to each other, but I feel that the Vue2 solution is missing a specific definition:
Vue3
Vue2
However, I'd like to see if anyone would have some advice as this is not as straightforward and does not seem to work from playing around with the JSBin link.
Beta Was this translation helpful? Give feedback.
All reactions