Why the default value variable change as the changed variable value, Vuejs

user_15019191 0
Viewed 75

as you see the code, on the handleUpdateFilter function the second "if" some how defaultCourseData is filtered as filteredData of the first "if". Thank you for helping me!

    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
    };
  },
vuejs3 vue-composition-api vue.js javascript
1 Answers

Your defaultCourseData variable isn't reactive. Therefore it should be evaluated as null at every call.

Try this


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
    };
})

Edit: The actual issue here was, that the defaultCourseData always returned a sorted array as Array.prototype.sort() mutates the Array. So making a copy solves the issue.

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