为什么默认值变量更改为更改的变量值，Vuejs答案

【问题标题】：Why the default value variable change as the changed variable value, Vuejs为什么默认值变量更改为更改的变量值，Vuejs
【发布时间】：2021-07-16 15:10:05
【问题描述】：

正如你看到的代码，在handleUpdateFilter 函数中，第二个“if”是如何将defaultCourseData 过滤为第一个“if”的filteredData 的。谢谢你帮助我！

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

【问题讨论】：

标签： javascript vue.js vuejs3 vue-composition-api

【解决方案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);       }

【讨论】：

仍然无法正常工作，defaultCourseData.value 仍然更改为过滤后的数组
数据实际上是给你一个“data.value”的对象，即一个 Vue Ref 类型，还是只是一个“普通”对象，即 { view: 'something' }？也许您的 if 子句永远无法正常工作，因为您检查了不存在的数据字段？
不，我在第二个if中也有console.logdefaultCourseData.value，这个数组的排序与第一个if数据相同。第二个if 我正在检查data.value.view 是否为假，sendcond if 已运行但问题是defaultCourseData.value 总是在data.value.view 为假时返回排序后的数组值。
没有用于defaultCourseData.value 的算法，但它总是会更改为已排序的数组。
对不起，我误解了你的问题你总是得到一个排序的数组，因为 Array.prototype.sort() 会改变原始数组。您必须创建一个副本，即const sorted = [...arr].sort(); 在您的情况下为if (data.value.view) { course.value = [...defaultCourseData.value].sort((a, b) => b.luotXem - a.luotXem); }