Vue中为对象添加字段

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

场景与问题

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

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

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



<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’)

所以上述代码应该改成



<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>

你可能感兴趣的:(code,snippet/pattern)