Vue向已定义的空对象添加的新属性和值，无法在页面上渲染。

最新推荐文章于 2022-11-21 11:39:02 发布
最新推荐文章于 2022-11-21 11:39:02 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： vue相关 文章标签： vue 响应式数据 Vue.set()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38422903/article/details/102799284
版权

问题背景：
先在data中定义了一个空对象obj:{}，ajax获取后台数据之后，将新的属性名和属性值赋给obj，结果发现页面上渲染不出数据。

个人解决方式：
重新定义了obj这个对象，把obj这个对象要从后台获取的属性全都先定义好了，形如：obj:{ a : ’ ', b : ’ ’ }。我这个方法只适合新添加的属性较少的情况，数据多时不可取。

官方文档的相关解释：
1、data是什么？
在这里插入图片描述
2、对传入data的js对象做了些什么？
在这里插入图片描述
3、如何让后来添加的数据成为响应式的？
在这里插入图片描述在这里插入图片描述

Evey li
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中定义的空对象，打印出来却是{__ob__: Observer}
qq_45791799的博客
09-27 4671
一、问题： 今天在vue的data中定义了一个json对象，明明是个空对象，可是打印的时候 却是下面这样的。 定义： data(){ return{ currentmeetingProjects: {},//当前选择的待审议项目 }} 打印： 二、理解 之所以在data中定义的数据可以实现双向绑定，是因为当在data中绑定一个对象的时候，vue会添加一个ob__:Observer_监听器对数据进行监听，这些内部属性虽然不可枚举（即不可以通过for…in循环进行遍历），但是console.l
vue JS 对象赋值
weixin_34252686的博客
02-13 1154
1.空对象赋值 let obj = {} obj[key] = value 这里注意key为字符串需要使用双引号，例如：obj["name"] = "张三" 2.对象间的赋值 定义一个对象接收赋值 let obj1 = {}; 定义另一个对象赋值给obj1 let obj2 = {"name": "赵四"} 对象间的赋值 obj1=JS...
关于如何利用原生js动态给一个空对象添加属性以及属性值
02-15 528
首先，回忆一下，访问对象属性一共有两种方法：点获取法和方括号获取法。而我们最常用的就是点获取法了。但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不太好用了，尤其是我们不知道属性名的时候更不好办。这时候，方括号获取法就派上用场了。下面，来看一个例子，就一目了然了。 代码如下： 1 <!DOCTYPE html> 2 <html lang=...
vue源码之：Object.create(null)
bxl0218的博客
10-11 1182
在vue和vuex源码中看到有使用Object.create(null) 创建对象的代码，有点疑惑为什么要使用Object.create(null)，而不是{}？这两种方式创建的对象有什么区别？ 一、Object.create(null) 和 {} 的区别 var obj1 = {}; console.log(obj1); // {} console.log(Object.getProt...
(vue)给对象中添加属性，新对象在另一个页面展示
nyf_unknow的博客
07-06 728
(vue)给对象中添加属性，新对象在另一个页面展示
vue 解决数组赋值无法渲染在页面的问题
10-16
这导致了一个常见的问题：当你尝试通过赋值方式更新数组，虽然实际数组确实被修改了，但Vue的视图不会随之更新，从而引发“数组赋值无法渲染在页面”的问题。 首先，我们来看一下这个问题的两个主要错误点： 1. **...
vue 实现在同一界面实现组件的动态添加和删除功能
10-15
要动态添加组件，可以在 Vue 实例的 `methods` 中定义一个方法，该方法负责将新的数据项添加到数组中。例如： ```javascript methods: { addComponent() { this.items.push({ /* 新组件的数据对象 */ }); } ...
vue data对象重新赋值无效(未更改)的解决方式
10-15
在Vue.js中，数据绑定是基于数据响应式的，这意味着当你修改`data`对象中的属性时，Vue会自动追踪这些变化并更新对应的视图。然而，当你尝试直接赋值给一个对象属性，Vue可能无法检测到这个变化，导致视图没有更新。...
解决vue项目中某一页面不想引用公共组件app.vue的问题
10-14
在上述代码中，我们通过`updatePageComponents`方法判断当前路由，如果匹配到登录页面，则设置`isNoHeader`和`isNoAside`为`true`，从而在这些页面上隐藏相应的组件。 此外，如果你的公共组件已经注册在`app.vue`，...
使用vue-router切换页面时实现设置过渡动画
10-16
在Vue.js应用中，使用vue-router进行页面切换时，我们经常希望添加过渡动画来提升用户体验。这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是...
JS 创建新对象 创建空对象
YDOOK
08-20 849
使用方法 : 使用关键字 ： new var obj = new Object()
在vue中存在数组和对象重新赋值时，会丢失响应式
qq_44173499的博客
02-26 1946
1.在vue中存在数组和对象重新赋值时，会丢失响应式》。 解决方法： let current = { ...this.choiceList[index], isTableEditer: true} this.$set(this.choiceList,index,current)
vue3 ref，reactive请求后的赋值问题以及解决方法
柒柒柒柒
06-14 1万+
vue3 ref，reactive请求后的赋值问题以及解决方法
前端面试题整理
weixin_46103538的博客
08-12 1220
前端面试题整理 1.JS里的基本引用类型与数据引用类型有哪些，引用类型和基本类型的区别 2.null和undefind区别 1）、undefined：定义变量后，没有赋值 2）、null：对象没有引用的值，即就是：引用类型里没有存储地址。 null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示尚未存在的对象 undefined表示"缺少值"，就是此处应该有一个值，但是还
vue3(语法糖)reactive数据直接赋值将失去响应式
weixin_47560716的博客
11-21 483
vue响应式丢失问题
Vue 对象类型动态添加属性和值
ic_xcc的博客
12-20 1875
一、导入vue.js import Vue from 'vue' 二、对象的定义 data() { return { agsButton:{ "key": value }, }; }, 三、...
vue3 定义一个空数组
wandoumm的博客
07-01 4495
import {reactive,onMounted} from 'vue' import axios from 'axios' let state =reactive({ books:[] }) onMounted(()=>{ axios({ method:'get', url: '/api/book/hot' }
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
热门推荐
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
在new Vue中定义数据msg，flag;并且渲染数据
最新发布
08-10
### 回答1： 可以这样定义数据并渲染： ``` <template> <div> <p>{{ msg }}</p> <p>{{ flag }}</p> </div> </template> <script> export default { data() { return { msg: 'Hello, Vue!', flag: true } } } </script> ``` ### 回答2： 在Vue中定义数据可以通过在Vue实例的data属性中进行声明和初始化。根据题目要求，我们可以在new Vue实例中创建一个data对象，并在其中定义名为msg和flag的数据。例如： ```javascript new Vue({ el: '#app', data: { msg: 'Hello Vue!', // 定义名为msg的数据，初始值为'Hello Vue!' flag: true // 定义名为flag的数据，初始值为true } }) ``` 接下来，我们需要在HTML页面中渲染这些数据。可以通过在DOM元素中使用双花括号插值表达式`{{ }}`来展示数据。例如，如果想将msg和flag分别展示在id为app的元素下，则可以在HTML页面中添加如下代码： ```html <div id="app"> <p>{{ msg }}</p> <!-- 通过msg数据进行文本插值 --> <p>{{ flag }}</p> <!-- 通过flag数据进行文本插值 --> </div> ``` 上述代码将会在浏览器中渲染出两个段落元素，分别显示msg和flag的值。其中msg的值为'Hello Vue!'，flag的值为true。最终页面效果如下所示： ``` Hello Vue! true ``` 这样就完成了在new Vue中定义数据msg和flag，并渲染数据的过程。 ### 回答3： 在Vue中，我们可以使用`new Vue`来创建一个Vue实例。首先，我们需要在Vue实例中定义数据`msg`和`flag`。定义数据的方式是在`data`属性中声明它们，并且返回一个包含这些数据的对象。 例如，我们可以这样定义数据`msg`和`flag`： ```javascript new Vue({ data: { msg: 'Hello Vue!', flag: true } }) ``` 在这个例子中，我们将`msg`设置为字符串`'Hello Vue!'`，将`flag`设置为`true`。 接下来，我们需要在页面上渲染这些数据。在Vue中，我们可以使用双花括号`{{}}`来绑定数据到HTML元素中。 例如，我们可以在HTML模板中添加以下代码来渲染`msg`和`flag`数据： ```html <div id="app"> <p>{{ msg }}</p> <p v-if="flag">Flag is true.</p> <p v-else>Flag is false.</p> </div> ``` 这里，我们在`<p>`标签内使用了双花括号`{{}}`来显示`msg`的值。 另外，我们使用了`v-if`和`v-else`指令来根据`flag`的值显示不同的内容。 最后，我们需要将Vue实例挂载到一个HTML元素上。我们可以使用`el`属性来指定Vue实例将要控制的HTML元素。 例如，我们可以这样挂载Vue实例到某个元素上： ```javascript new Vue({ el: '#app', data: { // ... } }) ``` 注意，这里的`#app`是一个选择器，表示我们将Vue实例挂载到具有id为`app`的元素上。 以上就是使用`new Vue`定义数据`msg`和`flag`，以及渲染数据的过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值