CODEWITHSUNDEEP
jqueryvue.js
AliN11
AliN11

Reputation: 2583

append vue js component using jquery

I'm trying to dynamically append vue components to my app using jquery. But nothing happens and appended element not rendering.

<div id="app">


</div>

<script>
  Vue.component('my-component', {
     template: '<p>This is component</p>'
  });

  var Vue = new Vue({
    el: '#app'
  });

 $(document).ready(function(){
   $('#app').append('<my-component></my-component>');
 })
</script>

My desired result is that when appending <my-component></my-component> to #app, That become to specified template.

Upvotes: 3

Views: 8597

Answers (4)

Gerardo Rosciano
Gerardo Rosciano

Reputation: 901

You can use dynamic components for that https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

per documentation:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

But for change currentView you will probably need to use vue as well, with button @click="currentView('posts')".

Other way you can do it is using bus to emit the value, like

var bus = new Vue();
$(document).ready(function(){
    bus.$emit('my-component');
})

but not sure if that what you want

Upvotes: 0

Hari Das
Hari Das

Reputation: 10914

The proper way to handle this is through conditional rendering:

<my-component v-if="value == value_after_ajax"></my-componment>

You can put the right condition inside v-if to show the template only when it is required after the ajax call.

Read more about this here https://v2.vuejs.org/v2/guide/conditional.html#v-if

Upvotes: 2

anayarojo
anayarojo

Reputation: 1205

You can try this:

var component = {
    template: '<p>This is component</p>'
};

Vue.component('my-component', component);
var myComponent = Vue.extend(component);
var component = new myComponent().$mount();

$('#app').append(component.$el);

If you need to pass to your component some props

var component = new myComponent({
    propsData: {
        values: 'my-value'
    }
}).$mount();

Credits: https://medium.com/@ezkeromar/append-some-vue-js-component-dynamically-to-the-dom-using-jquery-abb92f0425ce

Upvotes: 2

Eder Daniel Valcarcel Vanegas
Eder Daniel Valcarcel Vanegas

Reputation: 121

this worked for me

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <div id="agregame">

        </div>


        <button type="button" id="agregame_click">Add click</button>
  <button type="button" v-on:click="addForm()">Add Form</button>
</div>

<script>


var vm =new Vue({
    el: '#app',
  data: {
    range:0,
    questions:[]
  },

  methods: {
    addForm: function() {
        vm.questions.push({
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    })

        var Profile = Vue.extend({
  template:`
  <div id="mount-point">
<h3>Guest Content</h3>
  <ul>
    <li v-for="question in questions">
  {{question.firstName}}
    </li>
  </ul>
  </div>
`,
  data: function () {
    return {
         questions: vm.questions

            }
        }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')
    }
  }
})

jQuery(document).ready(function($) {
    $("#agregame_click").on("click", function(){

        $("#agregame").html('<div id="mount-point"></div>');
        vm.$forceUpdate()
         vm.$emit('my-form');
        alert()
    })
});


</script>
</body>
</html>

Upvotes: 2

Related Questions