vue 接口调用返回的数据未渲染问题 |
您所在的位置:网站首页 › vue获取数据页面没渲染 › vue 接口调用返回的数据未渲染问题 |
如果在实例创建之后添加新的属性到实例上,他不会触发视图更新。 官方说明: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96 下面这段是官方的一段 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter;这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更。 差不多的意思就是,在初始化实例时,VUE会将对象属性转化为带getter/setter的,只有setter/getter,页面上的数据才能被监听并修改。 这里记一个开发中遇到的问题: 代码如下:在回调方法里又再次请求后端,然后又对对象内部属性赋值,结果可以看第二张图(浏览器的调试图) ![]() 可以看到,这个menu对象的children和number属性有值,但是没有setter/getter方法, ![]() 渲染后的结果图如下,第二次回调方法里的数据未被渲染到页面, ![]() 而要让后面添加的数据在页面被渲染,就要让VUE知道我们新添加的属性,使用vue.$set (object,key,value)方法添加属性 修改: ![]() 调试图:可以看到children和number已经有setter/getter方法了 ![]() 渲染结果: ![]() |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |