Currently in the process of setting up a filter using vue-multiselect. Everything seems to be working fine, but there's one issue I can't seem to resolve. Upon page reload, the label (v-model) appears empty.
The root cause seems to be that the v-model selectedOption is empty upon page reload because the prop from the parent component is a computed property.
To improve readability, I will be omitting most of the code.
Parent component (ProductList.vue):
<template>
<section>
<ProductListFilter v-bind:currentProductType="currentProductType">
</section>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
computed: {
...mapGetters({
currentProductType: 'shop/productTypes/currentProductType',
}),
},
mounted() {
this.$store.dispatch('shop/productTypes/setCurrentProductType', this.productType);
},
}
</script>
Child component (ProductListFilter.vue)
<template>
<div>
<div v-if="allProductTypes && currentProductType" class="col-4">
<multiselect v-model="selectedProductType"
:options="options"
:multiple="false"
:close-on-select="true"
label="title"
placeholder="Produkttyp"
:allowEmpty="false">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
name: "ProductTypeFilter",
props: ['currentProductType'],
components: { Multiselect },
data() {
return {
selectedProductType: this.currentProductType,
}
},
}
</script>
If I display {{ selectedProductType }} in my template, it shows as empty because the property in the parent component is a computed property fetched from an API. I've tried setting
this.selectedProductType = this.currentProductType