我目前正在构建一个过滤器vue-multiselect
。一切正常,但我面临的唯一问题是,在页面重新加载时,标签(v-model)为空。
原因肯定是,v-modelselectedOption
在页面重新加载时是空的,因为来自父组件的 prop 是一个计算属性。
为了获得最佳可读性,我将删除大部分代码。
父组件(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>
子组件(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>
现在的问题是,如果我{{ selectedProductType }}
在模板中打印,它当然是空的,因为在父组件中,该属性是一个计算属性,来自一个 api。我已经尝试this.selectedProductType = this.currentProductType
在mounted中使用,但这也不起作用,