계산된 프롭에서 하위 구성 요소의 데이터를 설정하는 방법

계산된 프롭에서 하위 구성 요소의 데이터를 설정하는 방법

현재 필터를 만드는 중입니다.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>

하위 구성 요소(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장착되었지만 이것도 작동하지 않습니다.

추가할 수 있습니다.watch업데이트할 속성selectedProductType언제든지currentProductType변화들.하위 구성 요소:

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

언급URL : https://stackoverflow.com/questions/66173130/how-to-set-data-in-child-component-from-computed-prop