Блог

Используя 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
      })
    })
  }
}
  

Вот пример некоторых моих попыток, но пока безуспешно. Спасибо за вашу помощь

Вам нужно определить ключ для сравнения 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>