uniapp 中去掉获取到带有__ob__: Observer的数组内对象的 __ob__: Observer,并且能把数据渲染到页面
时间: 2023-09-25 16:15:42 浏览: 65
在 Vue.js 中,使用 Observer 对象来监听数据变化,__ob__ 属性就是 Observer 对象的一个标识。在使用 Vue.js 的时候,我们不需要手动去处理 __ob__ 属性。但是在使用 uniapp 的时候,由于 uniapp 并没有完全兼容 Vue.js,会出现带有 __ob__ 属性的数组对象不能正常渲染到页面的问题。
为了解决这个问题,我们可以使用 JSON 序列化和反序列化的方法去掉 __ob__ 属性。具体方法如下:
1. 在获取到数组对象后,使用 JSON 序列化和反序列化的方法,将数组对象转为普通的 JS 对象。
```javascript
const arr = JSON.parse(JSON.stringify(rawArr))
```
2. 将转换后的普通对象赋值给 data 中对应的数组对象。
```javascript
this.data.list = arr
```
这样就能够去掉数组对象中的 __ob__ 属性,并且能够将数据正常渲染到页面中了。
相关问题
将[0 : {__ob__: Observer} 1 : {__ob__: Observer} 2 : {__ob__: Observer}] 处理成一个数组对象
这个数据看起来像是 Vue.js 的响应式数组对象。如果想将其处理成一个普通的数组对象,可以使用 `Array.from()` 方法或者展开运算符 `...`,示例如下:
```javascript
const originalArr = [
{__ob__: Observer},
{__ob__: Observer},
{__ob__: Observer}
];
// 使用 Array.from() 方法
const newArray1 = Array.from(originalArr);
console.log(newArray1); // [{__ob__: Observer}, {__ob__: Observer}, {__ob__: Observer}]
// 使用展开运算符 ...
const newArray2 = [...originalArr];
console.log(newArray2); // [{__ob__: Observer}, {__ob__: Observer}, {__ob__: Observer}]
```
以上两种方法都可以将响应式数组对象转换成普通的数组对象。
[{…}, __ob__: Observer]如何获取整个数组的值
[{…}, __ob__: Observer]是一个Vue.js中的对象,它是基于观察者模式实现的数据绑定的。 __ob__ 属性是Vue内部使用的,通常不需要直接访问。
如果想获取整个数组的值,可以使用JavaScript中的数组方法。例如,可以使用数组的slice方法来获取数组的一个副本:
```
let arr = [{…}, __ob__: Observer];
let copy = arr.slice();
```
也可以使用数组的map方法来映射每个数组元素,返回一个新的数组:
```
let arr = [{…}, __ob__: Observer];
let mapped = arr.map(item => item);
```
或者使用数组的forEach方法来遍历数组中的每个元素:
```
let arr = [{…}, __ob__: Observer];
arr.forEach(item => console.log(item));
```
你也可以直接使用下标访问数组中的每个元素:
```
let arr = [{…}, __ob__: Observer];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)