Vue instance inside Vue instance

Question

Sup people!

I got this HTML code here:

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

This basically references a Vue instance inside another Vue instance if I understood everything correctly. The respective JS code is split up in two files and looks like this:

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

Now, the problem with this is, that doSomething from componentTwo never gets called.

But when I do some inline stuff, like {{ 3 + 3 }}, it gets computed like it should. So Vue knows there is something. And it also removes the @click element on page load.

I tried fiddling around with inline-template as well, but it doesn't really work as I'd expect it to in this situation. And I figured it isn't meant for this case anyway, so I dropped it again.

What would the correct approach be here? And how can I make this work the easiest way possible with how it's set up right now?

The Vue version we use is 2.1.8.

Cheers!

Answer 1

The problem is that you have two vue instances nested to each other. If the elements are nested, then you should use the same instance or try components

https://jsfiddle.net/p16y2g16/1/

// componentTwo.js
var item = Vue.component('item',({
  name:'item',
    template:'<button @click="doSomething($event)">{{ message2 }</button>',
    data: function(){
      return{ 
        message2: 'ddddddddddd!'
    }},
  methods: {
    doSomething: function(event) {alert('s')}
  }
}));

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

<div data-init="component-one">
  <button >{{ message }}</button>
  <item></item>
</div>

Separate instances work if they are independant of each other. as follows:

https://jsfiddle.net/p16y2g16/

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

// componentTwo.js
var ddd = new Vue({
  el: '[data-init="component-two"]',
    data: {
      message: 'ddddddddddd!'
    },
  methods: {
    doSomething: function(event) {alert('s')}
  } 
});

Answer 2

But when I do some inline stuff, like {{ 3 + 3 }}, it gets computed like it should. So Vue knows there is something.

Because you have parent instance 'componentOne'. It activated Vue for this template. If you need to set another instance inside, you have to separate part of template. Example (it can lag in snippet!) . Alternative

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>