My situation involves three Vue components. The first component is a page listing, which contains a filter and a list. As the page listing component renders, it needs to parse JSON and pass that object into the filter component. However, I'm facing an issue where the mounted script runs after the filter component has been rendered, resulting in no object being passed to the filter for rendering. How can I work around this problem? I've looked into the Vue lifecycle but am unable to pinpoint the exact issue.
In the filter component, when I output {{test}}, it displays the correct text 'yayaya' because it's a string and doesn't require manipulation. But why does {{dataTagGroups}} in the filter component return nothing; it appears empty?
LISTING PAGE COMPONENT
<template>
<div>
<section class="mega-filter js-mega-filter">
<mega-filter
:dataEndpoint="dataEndpoint"
:dataTagGroups='dataTagGroups'
:dataSortOptions='dataSortOptions'
test="yayaya"
v-cloak
>
<!-- label for sort filter -->
<template slot="sortLabel">Sort</template>
<template slot="sortLabelMobile">Sort by</template>
</mega-filter>
</section>
</div>
</template>
<script>
import listingcards from '../listing-cards/_listing-cards.vue';
import megafilter from '../megaFilter/_mega-filter.vue';
import axios from 'axios';
export default {
name: 'listing-cards-list',
components: {
'mega-filter': megafilter
},
data() {
return {
dataEndpoint: '',
dataTagGroups: {},
dataSortOptions: {},
dataNumItems: '',
dataPageSize: ''
};
},
props: {
},
directives: {
},
methods: {
},
mounted() {
this.dataEndpoint = this.$el.attributes['data-endpoint-url'] ? this.$el.attributes['data-endpoint-url'].value : null;
console.log(this.dataEndpoint)
// set tagGroups options
const tagGroups = this.$el.attributes['data-tag-options'] ? this.$el.attributes['data-tag-options'].value : null;
if (tagGroups) {
try {
this.dataTagGroups = JSON.parse(tagGroups)['tagGroups'];
} catch(err) {
console.error('Error parsing sort options');
}
}
console.log(this.dataTagGroups)
// set sort options
const sortOptions = this.$el.attributes['data-sort-options'] ? this.$el.attributes['data-sort-options'].value : null;
if (sortOptions) {
try {
this.dataSortOptions = JSON.parse(sortOptions)['sortOptions'];
} catch(err) {
console.error('Error parsing sort options');
}
}
console.log(this.dataSortOptions)
}
}
</script>
FILTER COMPONENT
<template>
<div class="mega-filter__container l-padding">
{{dataEndpoint}}
</div>
</template>
<script>
import { mixin as clickedOutsideDrawer } from 'vue-on-click-outside';
import axios from 'axios';
export default {
name: 'mega-filter',
data() {
return {
dataNumItems: '',
dataPageSize: '',
tagFilters: [],
sortByFilters: [],
url: '',
...CONFIG
}
},
props: {
dataEndpoint: '',
dataTagGroups: {},
dataSortOptions: {},
test:''
},
mounted() {
},
methods: {
}
}
</script>