#arrays #vue.js
#массивы #vue.js
Вопрос:
Используя vue, я пытаюсь изменить / обновить массив (перетаскиваемые объекты) на основе логики, согласно которой, если объект существует в другом массиве массивов (drozones), он будет удален из перетаскиваемых объектов
Каждый перетаскиваемый объект будет найден только в индексе многомерного массива, который соответствует идентификатору перетаскиваемого объекта.
Каждый подход, который я пробовал, либо возвращает все перетаскиваемые элементы, либо нет перетаскиваемых элементов, либо удаляются неправильные перетаскиваемые элементы.
// In this example I have three droppable and two drop areas, the first drop area can handle two droppable and the last area only one.
<div id="app">
<ul>
<li v-for="item in draggables">Item ID: {{item.id}} - Dropzone ID: {{item.dropID}}</li>
</ul>
</div>
data: {
draggableItems: [{id: 0, dropID: 0 }, {id: 1, dropID: 0 }, {id: 2, dropID: 1 }],
dropzones: [[{id: 1, dropID: 0 }], []]
},
computed : () {
draggables () {
return this.draggableItems.filter((item, index) => {
console.log('item', item)
return this.dropzones.filter((zone,i) => {
if (zone.length === 0) return
return item.id !== zone[i].id
})
})
}
}
Вот пример некоторых моих попыток, но пока безуспешно. Спасибо за вашу помощь
Ответ №1:
Вам нужно определить ключ для сравнения 2 объекта или вам нужна функция для сравнения объекта. Вы можете попробовать isEqual
функцию lodash
или сравнить 2 результата из JSON.stringify
new Vue({
el: '#app',
data: {
draggableItems: [{id: 0, dropID: 0 }, {id: 1, dropID: 0 }],
dropzones: [
[
{id: 1, dropID: 0 }
],
[]
]
},
computed: {
draggables () {
return this.draggableItems.filter((item, index) => {
return !this.dropzones.some((zone,i) => {
return zone.some(zoneitem => JSON.stringify(item) === JSON.stringify(zoneitem))
})
})
}
}
})
</script>
Комментарии:
1. Спасибо за ваш ответ @Дай Нгуен, ваше решение сработало. Я немного изменил его, чтобы просто соответствовать
itemID
zoneItemID
. поскольку они всегда будут уникальными. Я ценю вашу помощь. Возможно, я использовал для многих вложенных filter().