解决uniapp修改data中的数据视图未更新的问题

 

更改普通数据直接赋值即可,更改数组要通过this.$set()来解决

 

export default {
    data () {
        return {
            title: "Hello",
                        items: [
                            { message: "one", id: "1" },
                            { message: "two", id: "2" },
                            { message: "three", id: "3" }
                        ]
        }
    },

    /**
    * 更改题目-title
    */
    updateTitle() {
       this.title = "你要改的新值"
    },

       /**
     * 更改数组的元素
     */
    updateItems() {
        //格式this.$set( target, key, value )

        //第一种方式
        this.$set(this.items[0], 'message', 'one1', ); //改成数字类型就不用了加引号

        //第二种方式
        this.$set(this.items, 0, {
            message: "one3",
            id: "13"
        })
    }
}

 

代码来源:https://www.cnblogs.com/nurmemet/p/14473421.html

posted @ 2022-08-15 10:01  king'sQ  阅读(2195)  评论(0编辑  收藏  举报