Я использую вычисленное значение, которое возвращает массив. Это вычисленное значение используется в компоненте 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. Я подумал, может быть, кеширую или сохраняю предыдущую версию, но все равно ничего не вижу. Любая помощь/руководство будет принята с благодарностью.
Таким образом, компонент визуализируется, и первоначальная реализация просто передавала свойство компоненту. Реализация сортировки приводит к точно такому же порядку, поэтому я думаю, что что-то упускаю из реквизита и изменчивости. Я даже добавил точки останова в функцию сортировки, и она выполняет определенные действия, но когда дело доходит до времени рендеринга, сортировки как будто и не было.
Реквизиты Vue для объектов/массивов являются ссылками, а не копиями. Здесь происходит то, что ваши вычисления изменяют переданный реквизит, чего определенно следует избегать.
Почему он изменяет переданный реквизит?
Из-за Array.prototype.sort()
, который сортирует массив на месте, поэтому будут отсортированы как ваше вычисленное значение, так и исходное. Чтобы не сортировать его, просто скопируйте массив, return [...props.items].sort(() => {})
.
Вот детская версия того, чего вы хотите достичь (я так думаю).
Это сработало как чемпион, спасибо!
возможно, все, что использует ваш компонент, не передает ожидаемые данные в качестве реквизита — что произойдет, если вы
<component v-for = "(item, index) in items" ...more props />