Question

如您所见，在 handleUpdateFilter 函数中，第二个“if”函数是如何将 defaultCourseData 过滤为第一个“if”的过滤数据的。谢谢你帮助我！

    setup() {
    const course = ref();
    const defaultCourseData = null

    const gettingCourse = async () => {
      const { data } = await getCourse();
      
      defaultCourseData = data
      course.value = data;
    };

    const handleUpdateFilter = (data) => {
      // data is filtering value
      if (data.value.view) {
        const filteredData = defaultCourseData.sort((a, b) => b.luotXem - a.luotXem);
        course.value = filteredData;
      }
      if (!data.value.view) {
        course.value = defaultCourseData // This case some how defaultCourseData filtered too
      }
    };

    onMounted(() => {
      gettingCourse();
    });
    return {
      course,
      handleUpdateFilter,
      defaultCourseData
    };
  },

Answer 1

您的 defaultCourseData 变量不是响应式的。因此，每次调用时都应将其评估为 null。

试试这个


defineComponent({
  setup() {
    const course = ref([]);
    const defaultCourseData = ref([]);

    const gettingCourse = async () => {
      const { data } = await getCourse();
      defaultCourseData.value = data
      course.value = data;
    };

    const handleUpdateFilter = (data) => {
      // data is filtering value
      if (data.value.view) {
        course.value = defaultCourseData.value.sort((a, b) => b.luotXem - a.luotXem);
      }
      if (!data.value.view) {
        course.value = defaultCourseData.value // This case some how defaultCourseData filtered too
      }
    };

    onMounted(async () => {
      await gettingCourse();
    });
    return {
      course,
      handleUpdateFilter,
      defaultCourseData
    };
})

编辑：这里的实际问题是，defaultCourseData 总是返回一个排序的数组，因为 Array.prototype.sort() 会改变数组。因此，制作副本可以解决问题。

if (data.value.view) {         course.value = [...defaultCourseData.value].sort((a, b) => b.luotXem - a.luotXem);       }

为什么默认值变量随着变化的变量值而变化，Vuejs

1 个答案: