Inter-Component data binding using Browserify

[vinamelody]

Hi, originally I follow Laracasts' lesson here to pair Laravel+Vue.js nicely. But then as my component grows, I am having difficulties passing data to each other. For example, look at this image below:

I want: on Add button click, pass the item title from component Item to Set. But instead of executing function from app.js, it used item.js and I've tried other ways to get item.title accessible in app.js with no result. Is Item the child or same level as parent?

Folder structure:

Any help is very much appreciated.

[swift1]

It would be easier to help you if you put the code on jsfiddle. There are many ways to share data between components.

One way is with $broadcast: https://jsfiddle.net/9678Lor5/7/

Another way is with inherit http://jsfiddle.net/hajkrupo/3/

The parent has access to the children with this.$children and the children with this.$parent, so you can inspect the relationship in chrome. I also recommend the Vue plugin for chrome.

Maybe you can even find the working source code on laracasts' github page, for example: https://github.com/laracasts/The-Vast-World-of-Vuejs

[vinamelody]

Thanks swift1

I'm having difficulties putting it on jsfiddle because there is no way to repro Laravel folder structure (cmiiw).

[swift1]

If you want to see the relationship between your components and what's in the parent and children, you can just give the vue instance a name, like this:

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

and then inspect it in chrome by typing vue., for example JSON.stringify(vue.$children[0].$data)

[vinamelody]

@swift1 i try again on a fresh laravel install. When using Browserify, the way I declare a new Vue instance is like this

ar Vue = require('vue');
Vue.use(require('vue-resource'));

this causes message called "vm is defined but never used"
var vm = new Vue({
    el: '#app',
});

this is correct:
new Vue({
    el:'#app',
})

and this, how can i inspect it in chrome? Thank you in advanced

[swift1]

"vm is defined but never used" is not an error message, it's just an info message telling you that the variable vm is never used by the code. In chrome, just press F12 and type vm. to inspect the object. You could also inspect the component directly by setting a breakpoint inside the compile function, or by adding a debugger statement, (This will only work when you have the inspector open.)

Vue.component('some-component', {
  compiled: function () {
    debugger;
  }
})