Vue添加元素不能实时渲染

最新推荐文章于 2023-05-18 10:12:26 发布

咸鱼郑某

最新推荐文章于 2023-05-18 10:12:26 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

分类专栏：教程文章标签： vue.js vue

本文链接：https://blog.youkuaiyun.com/qq_35934658/article/details/123809658

教程专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Vue中正确动态添加数组元素的方法，解决了直接添加数组无法实时渲染的问题。通过使用Vue提供的this.$set方法，确保了视图能够响应式地更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue添加元素不能实时渲染

今天遇到了一个很奇怪的问题，如下

有如下数据结构

reply_info:[
	{
        "reply_reply_box": {
            "state": false,
            "reply_for_name": "回复@ZHF",
            "reply_text": "回复内容"
        },
        "blog_id": "博客ID",
        "reply_user": "评论用户",
        "reply_id": 0,
        "user_head_img": "img/head.jpg",
        "reply_text": "加载中···",
        "reply_time": "加载中···",
        "have_son_reply": true,
        ]
	}
]

现想添加一个reply键，变成如下结构

reply_info:[
	{
        "reply_reply_box": {
            "state": false,
            "reply_for_name": "回复@ZHF",
            "reply_text": "回复内容"
        },
        "blog_id": "博客ID",
        "reply_user": "评论用户",
        "reply_id": 0,
        "user_head_img": "img/head.jpg",
        "reply_text": "加载中···",
        "reply_time": "加载中···",
        "have_son_reply": true,
        "reply": [
            {
                "blog_id": "博客ID",
                "reply_user": "评论用户",
                "reply_id": 0,
                "user_head_img": "img/head.jpg",
                "reply_text": "加载中···",
                "reply_time": "加载中···",
                "have_son_reply": true
            }
        ]
	}
]

最开始，我使用了如下方法添加reply键

reply_info[0]['reply'] = [];

再使用如下方法添加元素

reply_info[0]['reply'].push({
	"blog_id": "博客ID",
	"reply_user": "评论用户",
	"reply_id": 0,
	"user_head_img": "img/head.jpg",
	"reply_text": "加载中···",
	"reply_time": "加载中···",
	"have_son_reply": true
})

发现，虽然在Vue中添加成功了，但网页并没有渲染出来，如何解决呢？

我们使用

this.$set(被添加键的对象 ,键名,元素);//如果需再添加一个数组则填[]

来代替原有的

reply_info[0]['reply'] = [];

即可