如何通过计算道具在子组件中设置数据

Question

我目前正在使用 vue-multiselect 构建过滤器。一切正常，但我面临的唯一问题是，在页面重新加载时，标签 (v-model) 为空。

原因肯定是，v-model selectedOption 在页面重新加载时为空，因为来自父组件的 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。我已经尝试在 mounted 中使用 this.selectedProductType = this.currentProductType 但这也不起作用，

Answer 1

您可以添加 watch 属性以在 currentProductType 发生变化时更新 selectedProductType。在您的子组件中：

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

如何通过计算道具在子组件中设置数据

How to set data in child component from computed prop

javascript

vue.js

vuex

nuxt.js

vue-multiselect