Vue3: вычисленное значение (массив) не сортируется на основе реквизита

Я использую вычисленное значение, которое возвращает массив. Это вычисленное значение используется в компоненте Vue.

<component v-for = "(item, index) in sortedItems" ...more props />

Опора, которую я использую для вычисления значения, имеет форму

const props = defineProps({ items: { type: Array, default: () => [] } })

Вычисленное задание

const sortedItems = computed(() => {
    return props.items.sort((l, r) => {
        const lValues = l.item.subItems.map(i => i.optValue)
        const rValues = r.item.subItems.map(i => i.optValue)
        const lMin = (Math.min.apply(null, lValues));
        const rMin = (Math.min.apply(null, rValues));
        return (lMin < rMin ? -1 : 1);
    })
});

Извиняюсь за длину, но вот представление структуры данных, исходящей из реквизита.

[
    {
        item: {
            name: "item1",
            subItems: [
                {
                    optName: "name1",
                    optValue: 60
                },
                {
                    optName: "name2",
                    optValue: 70
                },
            ]
        },
    },
    {
        item: {
            name: "item2",
            subItems: [
                {
                    optName: "name3",
                    optValue: 80
                },
                {
                    optName: "name4",
                    optValue: 90
                },
            ]
        },
    },
    {
        item: {
            name: "item3",
            subItems: [
                {
                    optName: "name5",
                    optValue: 50
                },
                {
                    optName: "name6",
                    optValue: 60
                },
            ]
        },
    },
]

Я запустил сортировку набора данных в тестовой среде за пределами vue/computed/props, и она отлично работает. Мне чего-то не хватает, когда дело касается Vue. Я подумал, может быть, кеширую или сохраняю предыдущую версию, но все равно ничего не вижу. Любая помощь/руководство будет принята с благодарностью.

возможно, все, что использует ваш компонент, не передает ожидаемые данные в качестве реквизита — что произойдет, если вы <component v-for = "(item, index) in items" ...more props />

Jaromanda X 21.06.2024 05:05

Таким образом, компонент визуализируется, и первоначальная реализация просто передавала свойство компоненту. Реализация сортировки приводит к точно такому же порядку, поэтому я думаю, что что-то упускаю из реквизита и изменчивости. Я даже добавил точки останова в функцию сортировки, и она выполняет определенные действия, но когда дело доходит до времени рендеринга, сортировки как будто и не было.

Maldaer 21.06.2024 05:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Реквизиты Vue для объектов/массивов являются ссылками, а не копиями. Здесь происходит то, что ваши вычисления изменяют переданный реквизит, чего определенно следует избегать.

Почему он изменяет переданный реквизит?

Из-за Array.prototype.sort(), который сортирует массив на месте, поэтому будут отсортированы как ваше вычисленное значение, так и исходное. Чтобы не сортировать его, просто скопируйте массив, return [...props.items].sort(() => {}).

Вот детская версия того, чего вы хотите достичь (я так думаю).

Это сработало как чемпион, спасибо!

Maldaer 21.06.2024 15:03

Другие вопросы по теме