I have this html:
<div id='parent'>
{{title}}
<div id='children'>
{{titleChildren}}
</div>
</div>
and these two Vue instances:
var parent = new Vue({
el: "#parent",
data: {
title: 'Test Parent'
}
});
var parent = new Vue({
el: "#children",
data: {
titleChildren: 'Test Children'
}
});
The problem is the data of children is not bind on the html. I can have one instance inside other, like angular?
fiddle example: https://jsfiddle.net/dsxvce0w/
Considering Vue.js 2.0, your code did not work because you instantiated in the wrong sequence.
In the right sequence the children data will bind on html as you want.
Wrong sequence:
var parent = new Vue({
el: "#parent",
data: {
title: 'Test Parent'
}
});
var children = new Vue({
el: "#children",
data: {
titleChildren: 'Test Children'
}
});
Right sequence:
var children = new Vue({
el: "#children",
data: {
titleChildren: 'Test Children'
}
});
var parent = new Vue({
el: "#parent",
data: {
title: 'Test Parent'
}
});
*Note: Var name changed for better understanding
You're using an outdated version of Vue. Here's the same code using the latest version: https://jsfiddle.net/racbns2x/
// Vue 1.0.7
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js
