I'm facing an issue with passing data from a parent component to a child component using props. Here is the code snippet I'm working with:
<div id="root">
<my-component v-bind:account-types='accountTypes'>
</my-component>
</div>
Vue.component('my-component', {
props: ['accountTypes'],
data() {
return { accounts: Object.assign({},this.accountTypes) }
},
template: `
<div v-for="x in accounts"></div> // This line is returning 0
`
}
Even though the Vue debugger extension shows that my-component has the accountTypes, it doesn't seem to display them properly.
The structure of the object I'm working with looks like this:
var obj = {
1 : [ "a", "z", "k", "m" ]
2 : [ "a", "b", "c", "d" ]
}
In my main app, I have the following:
var app = new Vue({
el: '#root',
data: {
accountTypes : {},
},
methods : {
// selecting & pushing
accountTypeSelected(clientIndex, formName, action) {
if (action == 'add') {
this.pushValue(clientIndex, formName)
} else {
this.removeFromArray(clientIndex, formName)
}
},
// Methods for pushing and deleting values:
pushValue(key, value) {
var obj = this.accountTypes
if (obj.hasOwnProperty(key)) {
var idx = $.inArray(value, obj[key]);
if (idx == -1) {
obj[key].push(value);
}
} else {
obj[key] = [value];
}
},
removeFromArray(key, val) {
var idx = $.inArray(val, this.accountTypes[key]);
if (idx != -1) {
this.accountTypes[key].splice(idx, 1);
}
}
}