I am facing an issue with my Vue components. I have a rad-list component and a rad-card component. In the rad-list component, I have placed a slot element where I intend to place instances of rad-card. The rad-card component needs to receive objects from the computedResults array in the parent scope and iterate through them to pass the results to the item prop in rad-card. However, since computedResults is defined in the parent component, my rad-card instance does not have access to it.
<rad-list model="Discount" module="Discount" results="discounts">
<rad-card :item="result" v-for="result in computedResults" :key="result.id" :model="module"></rad-card>
</rad-list>
When trying to render this setup, I encounter the following error:
[Vue warn]: Property or method "computedResults" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)
This is how my rad-list component is structured:
<template>
<div class="RADlist_maincontainer">
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
<div class="RADlist_wrapper">
<!--rad-card, or any other component which will use computedResults GOES HERE-->
<slot></slot>
</div>
<layout-pagination-1 v-show="pagination.last_page > 1" :pagination="pagination" @paginate="paginate({ page:pagination.current_page, paginate:paginate })"></layout-pagination-1>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
export default{
name: 'RADlist',
computed:
{
computedResults: function()
{
return this.$store.state[this.module][this.results];
},
pagination: function()
{
return this.$store.state[this.module].pagination;
},
...mapState('Loader', ['loader'])
},
props:
{
component: { default:'rad-card', type:String },
module: { default:'Post', type:String },
action: { default:'list', type:String },
results: { default:'posts', type:String },
page: { default:1, type:Number },
paginate: { default:6, type:Number },
},
mounted()
{
console.log(this.$options.name+' component successfully mounted');
this.$store.dispatch(this.module+'/'+this.action, { page: this.page, paginate: this.paginate, loaderId:2473});
},
}
</script>