How add dynamically Vue components with a parent Vue component?

Question

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"

$ is jquery : it's seems jquery is not imported or referenced... — Eric
– Eric, Commented Oct 6, 2019 at 13:25

Bassie · Accepted Answer · 2019-10-06 14:21:07Z

1

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

edited Oct 6, 2019 at 14:21

answered Oct 6, 2019 at 13:27

Bassie

10.5k10 gold badges88 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nir Amir Over a year ago

now I get another error: Cannot find element: #widgets, also I try your example exactly

Collectives™ on Stack Overflow

How add dynamically Vue components with a parent Vue component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related