[Vuejs]-Vue child component props not updating

by

3👍

✅

Your example is not very minimal, so I can only guess what might be the cause.

This is a red flag:

state.boxes[fromIndex] = { ... }

From the docs:

Vue cannot detect the following changes to an array:

  1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
  2. When you modify the length of the array, e.g. vm.items.length = newLength

You are also doing a splice() on the array at the same time, which Vue can detect, so coincidentally the array change will probably be reflected in the view, however what you may not realize is that the new object you assigned to the array index will not be reactive.

You need to use Vue.set():

Vue.set(state.boxes, fromIndex, { ... })

Leave a comment