How does vue update the data in the array?

I said that the data of the array can be changed by using the set method, but I tried how to report it wrong. Did I use it wrong?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
    <button v-for="(item,index) in msg" @click=add(index)>{{item.content[0]}}</button>
</body>
</div>
<script type="text/javascript">
        var test=new Vue({
            el:"-sharpapp",
            data:{
                msg: [
                    {content: [555,111]},
                    {content: [666,222]}
                ]
            },
            methods:{
                add(index){
                    this.$set(this.msg,this.msg[index].content[0],333)
                }
            }
        })
    </script>
</html>
Apr.28,2021

this.$set(this.msg[index].content, 0, 333)

vm.$set(vm.items, indexOfItem, newValue)

parameters clear

in addition, if you write it this way, the second parameter can only be 0

.

this.$set (target, key, value)

the data source to be changed by target: (can be an object or an array)

specific data to be changed by key:

value: the re-assigned value

can be found in the official api

Menu