Vuejs load directive dynamicly via data property

Question

From the axios i am getting <test-component></test-component> and i want to add this as a component to the example-component

The output is now

<test-component></test-component>

In stead off

test component

Is that possible and how can i achieve that?

App.js:

import Example from './components/ExampleComponent.vue'
import Test from './components/Test.vue'
Vue.component('example-component', Example)
Vue.component('test-component', Test)
const app = new Vue({
  el: '#app'
});

ExampleComponent:

<template>
    <div class="container">
        {{test}}
    </div>
</template>

export default {
    data() {
        return {
            test: ''
        }
    },
    created() {
        axios.get('/xxxx')
            .then(function (response) {
                this.test = response.data.testdirective
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .finally(function () {
                // always executed
            });
    }
}

TestComponent:

<template>
    <div class="container">
        test component
    </div>
</template>

You might want to have a look at this. You need to recompile the template you get from the server. Or use server-side rendering. Meaning: It is not possible with the run-time only build. — Armin Bu
– Armin Bu, Commented Aug 6, 2019 at 9:09
You should change the use of directive in this context to component as directives in vue have different purposes and are only applied as attributes e.g. v-for, v-if etc — Armin Bu
– Armin Bu, Commented Aug 6, 2019 at 9:43

tony19 · Accepted Answer · 2022-07-16 01:18:39Z

It is not possible with the runtime-only build of vuejs. You will need to configure your setup to use the full build of vuejs. The docs specify the setup with some build tools like webpack.

Once the vue template compiler is integrated in the runtime. You can use your current approach to render the component dynamicaly.

There is also another approach to this, which is a bit simpler. You can use dynamic components like this:

<template>
  <div>
    <component v-if="name" :is="name"></component>
  </div>
</template>

<script>
import TestComponent from "./TestComponent.vue"
import Test2Component from "./Test2Component.vue"
import Test3Component from "./Test3Component.vue"

export default {
  component: {
    TestComponent,
    Test2Component,
    Test3Component
  },

  data() {
    return {
      name: undefined
    }
  },

  created() {
    axios.get('/xxxx')
        .then(function (response) {
            // where 'response.data.testdirective' is the components name
            // without <> e.g. "test-component", "test1-component" or "test2-component"
            this.name= response.data.testdirective
        })
        .catch(function (error) {
            // handle error
            console.log(error);
            this.name = undefined
        })
        .finally(function () {
            // always executed
        });
  }
}
</script>

As you can see, instead of compiling the components on the fly, I import them to get pre-compiled and bind them dynamically via name. No additional setup required!

Collectives™ on Stack Overflow

Vuejs load directive dynamicly via data property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related