Having trouble binding an array as a variable and accessing it in the child component, resulting in the variable being undefined. Is there a way to pass an array from a view to a component so that the component can use this array to create a child component for each item?
I was able to create a loop in a component and use the array to generate sub-components for each item successfully. However, I want to make this component dynamic so it can receive a variable array with items from a parent component.
Parent view:
<template>
<div class="choose-method-container">
<choose-method-component :availablemethods="availablemethods" v-model="availablemethods" v-bind:title="title" v.bind:items_per_row="items_per_row" />
</div>
</template>
<script>
import ChooseMethodComponent from
'../components/ChooseMethodComponent.vue';
export default {
components: {
ChooseMethodComponent
},
methods: {
},
data: function() {
return {
title: 'Choose user type',
items_per_row: 2,
availablemethods: [
{title: 'Data', description: '', route: '/data'},
{title: 'Sales & Support', description: '', route: '/sales'},
]
}
},
</script>
Child component:
<template>
<div class="choose-method-inner-container">
<div class="card-container row flexbox" v-for="chunk in productChunks">
<stepcard-component v-for="step_card in chunk" class="step-card"
v-bind:key="step_card.value"
v-bind:title="step_card.title"
v-bind:description="step_card.description"
v-bind:name="step_card.name"
v-bind:value="step_card.value"
v-bind:view="step_card.view"
>
</stepcard-component>
</div>
<div class="button-container right">
<button type="submit" class="btn waves-effect waves-light" :disabled="choose_method_disabled" v-on:click="choose_method">
Choose method
</button>
</div>
</div>
</template>
<script>
import lodash from 'lodash';
import StepCard from './StepCard.vue';
export default {
components: {
StepCard
},
data: function() {
return {
choose_method_disabled: true,
}
},
mounted() {
console.log('mounted methods', {availablemethods: this.availablemethods, title:this.title});
this.productChunks();
},
computed: {
},
props: {
availablemethods: Array,
},
methods: {
choose_method: function() {
console.log('choose_method', this.method_view);
if(!this.method_view)
return;
this.$router.push({name: this.method_view});
},
productChunks() {
console.log('methods', this.availablemethods);
if(!this.availablemethods){
console.log('self', {self:this});
return;
}
var methods = this.availablemethods.forEach(function(method, index){
if(!method.name)
method.name= '';
if(!method.view)
method.view= '';
if(!method.value)
method.value= '';
if(!method.description)
method.description= '';
if(!method.title)
method.title= '';
return method;
});
let chunks = lodash.chunk(methods, this.items_per_row);
console.log('productChunks', {chunks:chunks});
return chunks;
}
}
}
</script>
Encountering issues trying to access availablemethods in the child component which logs as undefined. Any solutions to successfully pass the array without explicitly declaring and setting the array data in the child component?