Блог

Я надеюсь, что это просто. У меня есть этот компонент под названием «бренды», его код выглядит так:

 import {
  computed,
  defineComponent,
  getCurrentInstance,
  ref,
  toRefs,
  watch,
} from "@vue/composition-api";

import { useTrackProductImpressions } from "@logic/track-product-impressions";
import BrandComponent from "@components/brand/brand.component.vue";
import { Brand } from "@/_core/models";

export default defineComponent({
  name: "Brands",
  components: { BrandComponent },
  emits: ["onMore"],
  props: {
    brands: {
      type: Array,
      required: false,
      default: () => [],
    },
    hasMoreResults: {
      type: Boolean,
      required: false,
    },
    itemsToShow: {
      type: Number,
      required: false,
    },
    loading: {
      type: Boolean,
      required: false,
    },
    total: {
      type: Number,
      required: false,
    },
  },
  setup(props) {
    const instance = getCurrentInstance();
    const { itemsToShow, brands } = toRefs(props);
    const count = ref(0);
    const skip = computed(() => {
      if (!itemsToShow.value) return 0;
      return count.value * itemsToShow.value;
    });

    const more = () => {
      count.value  ;
      instance.proxy.$emit("onMore");
    };

    console.log(brands);

    watch(brands, (impressions: Brand[]) => {
      console.log(impressions);
      if (!impressions.length) return;
      const route = instance.proxy.$route;
      useTrackProductImpressions(impressions, route);
    });

    return {
      skip,
      more,
    };
  },
});
 

Как вы можете видеть, я настроил часы на свойство brands, чтобы, когда оно будет определено, оно отслеживало его. Проблема в том, что его никогда не вызывают.
В первом журнале консоли я вижу ссылку на бренды и вижу, что ее значение представляет собой массив, но в методе watch оно никогда не вызывается.

Компонент никогда не инициализируется без брендов:

 <brands
  :brands="brands"
  :hasMoreResults="brandsHasMoreResults"
  :itemsToShow="brandsItemsToShow"
  :total="brandsTotal"
  @onMore="brandsFetchMore()"
  v-if="brands.length"
/>
 

Любая помощь будет признательна.