Vue中为对象添加字段

最新推荐文章于 2024-04-07 19:41:50 发布

FitzLeopard

最新推荐文章于 2024-04-07 19:41:50 发布

阅读量9.6k

点赞数 1

分类专栏： code snippet/pattern 文章标签： vue

本文链接：https://blog.youkuaiyun.com/fitzleopard/article/details/106391844

版权

code snippet/pattern 专栏收录该内容

12 篇文章

订阅专栏

本文首发于我的个人博客
本文记录了作者使用Vue.js，并且在前端中为对象添加字段时遇到的坑点。

场景与问题

从后端拿到数据之后，可能为了渲染时的方便，想要在对象里添加一些字段，而后直接在渲染时引用

直观上实现这种功能可以直接使用原生的js语法，抽象出来，可以用如下的代码段表示(为了复制就可以演示，没有组件化)

但是如下代码是有问题的，obj.newField不能被渲染出来

<!DOCTYPE html>

<html>
    <body>
        <div id="app">
            {{ obj.newField }}
        </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data : {
                obj : {},
            },
            created() {
                obj.newField = "newData"
            }
        })
    </script>
</html>

正确的做法是使用Vue.set，因为在Vue的官方文档里有如下的表述

因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

所以上述代码应该改成

<!DOCTYPE html>

<html>
    <body>
        <div id="app">
            {{ obj.newField }}
        </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data : {
                obj : {},
            },
            created() {
                Vue.set(obj, "newField", "newData")
            }
        })
    </script>
</html>