Model not updating

[acordy]

I have a very minimal setup where I am passing v-model a ref with an array of objects like { content: "Hello" }. The only other prop on the vuuri component is "drag-enabled". When dragging, the model does not update: the items remain in the same initial order in the array.

This seems so simple that I'm not sure if I'm just missing something obvious. There are examples on the docs site where there is a simple kanban-style example with the model being printed, and when dragging it updates as the items are moved around. I'm not sure what I'm doing wrong, or if there's an issue with the code.

I've tried the master branch and vuuri-next-vue3

Any help would be appreciated, thanks!

[acordy]

I just tried a few of the examples in the repo, GroupsExample and AutoSort (that's the one that's printing the model), and they're not updating either, so I think something in the library must have changed at some point. Any advice on where something might have gone wrong would be appreciated, I can try and have a look myself to see if I can resolve the issue.

Thanks again,

[codeallthethingz]

I'm running in to the same issue.

@acordy The docs look to still use vuuri@0.1.1 so thats probably why they're still working over there.

[codeallthethingz]

I built a super ugly hack to get around this issue until it is fixed. I added a ref to the vuuri element and then figure out what the order should be based on the X & Y Transforms in the style.

 <vuuri ref="vuuriColumn" ... />

function hackReworkThisColumnOrder() {
  // find all the divs with a class of .muuri-item under vuuriColumn.value
  let items = vuuriColumn.value.$el.querySelectorAll('.muuri-item')
  // filter the itmes with e a class of  .muuri-item-placeholder
  items = Array.from(items).filter((item) => !item.classList.contains('muuri-item-placeholder'))

  //   get the translate y and translate x value from each item and store it in a new array
  items = items.map((item) => {
    const transform = item.style.transform
    const translateX = transform.match(/translateX\(([^)]+)\)/)[1]
    const translateY = transform.match(/translateY\(([^)]+)\)/)[1]
    return {
      itemKey: item.dataset.itemKey,
      translateX: parseInt(translateX),
      translateY: parseInt(translateY),
    }
  })
  // sort the items by translateY and then translateX
  items.sort((a, b) => {
    if (a.translateY === b.translateY) {
      return a.translateX - b.translateX
    }
    return a.translateY - b.translateY
  })

  // reorder the props.column.cards array to match the order of the items's dataset.itemKey
  props.column.cards.sort((a, b) => {
    return items.findIndex((item) => item.itemKey === a.id) - items.findIndex((item) => item.itemKey === b.id)
  })
}

[acordy]

Hi @codeallthethingz thanks for workaround. In the end I opened up the Vuuri code and I could see why it was and wasn't updating in certain cases (the model update emits were commented out or not present in certain cases if I recall correctly) and adding a few lines resolved the issue. But there were larger issues: after the initial items were added via v-for, there was never a reconciliation of the updated Muuri-controlled DOM elements with Vue's state, which could lead to unpredictable behaviour if other parts of the application made changes to the model, and the way the Vuuri wrapper is implemented also doesn't really handle model updates well if the user is also interacting with the grid at the same time. Since it never resynchronizes Vue's rendering model to the actual DOM model, besides other parts of an app potentially relying on this to be accurate, the elements are also not reordered (which to be fair is the Muuri default) but that can lead to accessibility issues (like someone tabbing through items and the focus jumping all around in an unpredictable way). Finally there were a bunch of logs for what look like debug reasons that were cluttering up the console... All in all it looks like perhaps the latest version of Vuuri isn't quite production-ready.

In the end I wrote my own Vue wrapper around Muuri to handle all these issues, so I'm good, but hopefully Vuuri will see some future updates that can help others.

Nonetheless, thanks so much for your time in coming up with a workaround, I'm sure it will help others!

[codeallthethingz]

@acordy great notes! If you happen to make that muuri wrapper public, lemme know!