Javascript 如何从计算属性设置子组件中的数据

我目前正在使用

vue multiselect

构建一个过滤器。一切正常，但我面临的唯一问题是，在重新加载页面时，标签（v-model）是空的

原因当然是，v-model

selectedOption

在页面重载时为空，因为父组件的道具是计算属性

为了获得最好的可读性，我将剪切大部分代码

父组件（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>

只要
currentProductType
发生更改，您就可以添加
watch
属性来更新
selectedProductType
。在子组件中：

watch: {
  currentProductType(val) {
    this.selectedProductType = val;
  }
}

watch: {
  currentProductType(val) {
    this.selectedProductType = val;
  }
}