CODEWITHSUNDEEP
vue.jsvuejs2
Bas
Bas

Reputation: 2400

Vuejs load directive dynamicly via data property

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>

Upvotes: 0

Views: 318

Answers (1)

Armin Bu
Armin Bu

Reputation: 1360

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!

Upvotes: 1

Related Questions