A little trick for Vue array update

Background: When I was working on a project recently, I encountered a problem: the data was refreshed but the interface was not refreshed. After a long time, I finally got it.

Let's take a look at the official documentation first:

Due to JavaScript limitations, Vue cannot detect the following changing arrays:

1. When you use the index to set an item directly, for example:vm.items[indexOfItem] = newValue
2. When you modify the length of the array, for example:vm.items.length = newLength

for example:

var vm = new Vue({ data: { items: [ 'a' , 'b' , 'c' ] } }) vm.items[ 1 ] = 'x' // not reactive vm.items.length = 2 // not reactive

So my code is written in a different way:

// state.inputChannel.channels[res.index].subtitle[res.subtitle.index] = res.subtitle

state . inputChannel . channels [ res . index ]. subtitle . splice ( res . subtitle . index )

state . inputChannel . channels [ res . index ]. subtitle [ res . subtitle . index ] = res . subtitle

Then, after changing to this way of writing, my interface will monitor OK.