CODEWITHSUNDEEP
javascriptvue.js
Nir Amir
Nir Amir

Reputation: 130

How add dynamically Vue components with a parent Vue component?

I try to create dynamic Vue component with a parent Vue component, but the dynamic component is not created,

I tried to add dynamic component to HTML by add new Child but is not working,,

<template>
  <div class="app-body row">
    <div class="widgets">
      <h1>new ems</h1>

      <div id="Device"><p>ems</p></div>

    </div>
  </div>
</template>

<script>
import { Component, Vue, Watch } from "vue-property-decorator";

export default {

created() {
    console.log('created');
this.displayWidget('Device');
},
methods:{
displayWidget(which) {
    let Child = Vue.extend({
        name: which,
        parent: this,

    });
    new Child({
        el: $(this.$el).find('.widgets')[0],
        template: '<div style="height: 200px; width: 200px; color: yellow">Hello</div>', // tried just standard template stuff here
        render: h => h('div')
    }).$mount();
    }
    }
    }

   </script>

I get error: [Vue warn]:Error in created hook: "ReferenceError: $ is not defined"

Upvotes: 1

Views: 784

Answers (1)

Bassie
Bassie

Reputation: 10400

Try giving the element an id like id="widgets" and use el: '#widgets' - seems to work in this codepen

You could also add a ref to the element like this

<div ref="widgets">

and then

el: this.$refs.widgets,

The reason you're getting the ReferenceError is probably because you haven't imported JQuery

Upvotes: 1

Related Questions