javascriptvue.jswebpackvuejs2vue-loader

Why is the vue <template> invalid with v-bind:src?

I want to dynamically switch html content, so I used vue-loader src to import, but v-bind:src doesn't take effect at all.

<template src="./app.html"></template>

Ok,effective

<template :src="getDOM(true)"></template>

getDOM(a){
        if(a){
            return './app.html'
        } else {
            return './app2.html'
        }
}

Not active.

So, what can I do to achieve this effect?

Solution

  • It seems like you need to use Vue dynamic components https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

    You can make a couple of components with the different templates that you need and just change the is property. Don't forget to import the needed components and register them.