Trouble filtering an array based on a multi-dimensional array using computed function in Vue

Question

Using vue I am trying to change/update an array (draggables) based on the logic that if the object exists in another array of arrays (drozones) it will be removed from draggables

Each draggable would only be found in the index of the multi-dimensional array that matches the draggables dropID.

Every approach I have tried either returns all draggable items, no draggable items or the incorrect draggable items is being removed.

// 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
      })
    })
  }
}

Here is a fiddle of some of my attempts but with no luck yet. Thanks for your help

Dai Nguyen · Accepted Answer · 2020-09-21 17:48:40Z

1

You need to detect the key for comparing 2 object or you need a function to compare object. You can try isEqual function of lodash or compare 2 result from 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>

answered Sep 21, 2020 at 17:48

Dai Nguyen

646 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bilcker Over a year ago

Thanks for your reply @Dai Nguyen Your solution did work. I changed it slightly to just match itemID to zoneItemID. since these will always be unique. I appreciate your help. Maybe I was using to many nested filter().

Collectives™ on Stack Overflow

Trouble filtering an array based on a multi-dimensional array using computed function in Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related