如何从计算的道具中设置子组件中的数据

Question

I am currently building a filter with vue-multiselect . Everything works, but the only problem I am facing is, that on page reload, the label (v-model) is empty.

The reason surely is, that the v-model selectedOption is on page reload empty, because the prop from the parent component is a computed property.

For the best readability I will cut 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>

Now the problem is, that if I print {{ selectedProductType }} in my template, of course it is empty because in the parent component, the property is a computed property, coming from an api. I already tried to use this.selectedProductType = this.currentProductType in mounted but this does not work too,

Answer 1

You could add a watch property to update selectedProductType whenever currentProductType changes. In your child component:

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