vue3接口数据赋值对象,渲染报错问题及解决

目录
  • vue3接口数据赋值对象,渲染报错
  • vue在渲染数据的时候的一些报错问题
    • 问题描述
    • 解决方法

vue3接口数据赋值对象,渲染报错

const app = require('express')()
// 跨域设置
app.all("*", function (req, res, next) {
    res.setHeader("Access-Control-Allow-Credentials", true);
    res.setHeader("Access-Control-Allow-Origin", '*'); // 添加这一行代码，代理配置不成功
    res.setHeader("Access-Control-Allow-Methods", '*');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since")
    next();
})
app.get('/', function (req, res) {
    res.send({
        dict: 'sfasf',
        detailAddress:'1111111'
  })
})
app.listen(9999, () => {
    console.log('http://localhost:9999')
})

用express启动了一个简单的node服务器写了一个测试接口

vue/cli创建的vue3项目，页面中通过接口获取的数据，注意第二个属性dict

现在我们用对象赋值的方法将res.data赋值给vue3的reactive里绑定的属性form

<template>
<div>{{data.form.dict}}</div>
<div>{{data.form.detailAddress}}</div>
</template>

<script setup>
import {reactive} from 'vue';
import axios from 'axios'
const data = reactive({
    form:null,
})
axios.get('http://localhost:9999').then(res => {
    console.log(res,'res');
    if (res.status === 200) {
        data.form = res.data
        console.log(data.form);
    }
})
</script>

<style lang="scss" scoped>
</style>

查看打印结果

报错了，但是页面能渲染 

如果我们把动态数据绑定的form初始化的值不用null，换成{}

<template>
<div>{{data.form.dict}}</div>
<div>{{data.form.detailAddress}}</div>
</template>

<script setup>
import {reactive} from 'vue';
import axios from 'axios'
const data = reactive({
    form:{},
})
axios.get('http://localhost:9999').then(res => {
    console.log(res,'res');
    if (res.status === 200) {
        data.form = res.data
        console.log(data.form);
    }
})
</script>

<style lang="scss" scoped>
</style>

打印结果

 没有报错，且能渲染 

总结：通过楼主查阅各种文档的细心研磨，发现vue3的动态数据绑定，在进行proxy代理的时候，get方法中的return返回时，使用了reflect反射来绑定this的指向

get:function(target,key){
    return Reflect.get(target,key)
}

我认为，如果初始值为null，会导致this指向null，引发这个报错问题，目前楼主认为是这个原因导致的。

vue在渲染数据的时候的一些报错问题

问题描述

vue在请求获取数据的时候，这个过程是异步的，但是刚进页面的时候，数据还未被获取到，是为空的，如果再次点击拿下一层数据时没办法拿到数据的，会报错

解决方法

i  在data中不使用null而是使用{}

ii可以在data中使用null，但是在渲染数据的外面的包一个div,使用v-if=" homeData"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <div v-if="homeData"> -->
            <div class="bangItem" v-for="bangItem in homeData.rank_list">
            <!-- </div> -->
        </div>

    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // homeData:null//刚进来的时候是null，上面使用rank_list还未获取数据，会报错，解决方法这里不使用Null，用{},方法二这里可以使用null,然后在渲染数据外面包一个div，使用v-if homeDate
                homeData: {}
            },
            created() {
                this.getHome()
            },
            methods: {
                getHome() {
                    fetch('http://m.kuwo.cn/newh5app/api/mobile/v1/home').then(res => res.json()).then(res => {
                        console.log(res);
                        this.homeData = res.data;
                    })
                }
            }
        })

    </script>
</body>

</html>

在vue中请求数据的时候，同一个数据有的是数据是不存在的，有的是存在的，如果直接写会报错，这时候可以在没有的那个数据名后面加?l来作为判断，之后再往下点一层

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue3响应式对象Reactive和Ref的用法解读

    目录 一.内容简介 二.Reactive 1. 关键源码 2. 源码流程分析 三.代理拦截操作 1. 数组操作 2.Get操作 3. Set操作 4. 其余行为拦截操作 四.Ref对象 1. 思考一个问题 2. 简要说明 3. 关键源码 四. 源码解析 五.总结 一.内容简介 本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref.前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在关键位置备注了详细注释. 备注:本篇幅只讲到收集依赖和触发依赖更新的时机,并未讲到如何收集依赖

  • vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    目录 vue对象复制 更新 我的理解 vue对象复制的坑--对象深度拷贝 错误描述 解决办法 vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李,并修改名字为小张 const copy2 = { ...

  • Vue关于对象直接赋值的坑及解决

    Vue关于对象直接赋值的坑及解决

    目录 Vue对象直接赋值的坑 Vue对象的赋值Object.assign({}, row) Vue对象直接赋值的坑 受JavaScript的限制,Vue不能监听到对象属性的添加或删除.如果这样做了,你会发现添加或删除的属性不是响应式的,即无法及时更新视图. 如果我们需要将a对象赋值给b对象时,要么把b对象的所有属性都在a对象中定义一下,要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去,或者使用Object.assign(this.

  • vue对象的深度克隆方式

    目录 vue对象的深度克隆 方法1 方法2 方法3 vue克隆对象时遇到的问题 vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbObj = {a:1}; var str = JSON.stringify(obj); //序列化对象 var newobj = JSON.parse(str); //还原 //相当于 var newObj = JSON.parse(JSON.stringify(olbObj )) 方法2 ES6语法对象展开

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • vue如何查找数组中符合条件的对象

    目录 查找数组中符合条件的对象 根据id找出数组里的对象 查找数组中符合条件的对象 let val = 1; let list = [ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, ]; let arr = list.filter((i) => { return val == i.id; }); 根据id找出数组里的对象  dsChange(id){       let selectedName = {};       selecte

  • vue3接口数据赋值对象,渲染报错问题及解决

    vue3接口数据赋值对象,渲染报错问题及解决

    目录 vue3接口数据赋值对象,渲染报错 vue在渲染数据的时候的一些报错问题 问题描述 解决方法 vue3接口数据赋值对象,渲染报错 const app = require('express')() // 跨域设置 app.all("*", function (req, res, next) { res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-C

  • 通过FeignClient调用微服务提供的分页对象IPage报错的解决

    通过FeignClient调用微服务提供的分页对象IPage报错的解决

    目录 问题描述 解决办法 feign返回IPage无法返回结果集 Mybatis-plus修改方式 feign的几种可能性 基于以上三点,有如下可能性 问题描述 通过FeignClient调用微服务提供的分页对象IPage报错 {"message": "Type definition error: [simple type, class com.baomidou.mybatisplus.core.metadata.IPage]; nested exception is com

  • vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析

    最近用vue3在做一个项目的时候,使用了element-plus中的组件el-table,在本地运行的时候一点错误也没有,但是打包后放到线上环境就开始报错.TypeError: Cannot read properties of null (reading 'insertBefore')和TypeError: Cannot read properties of null (reading 'emitsOptions') 这种报错可能存在三种情况. 然后查看代码的时候,我这边应该是第三种情况,改过

  • layui数据表格 table.render 报错的解决方法

    一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp

  • 解决vue接口数据赋值给data没有反应的问题

    问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • Pandas之read_csv()读取文件跳过报错行的解决

    读取文件时遇到和列数不对应的行,此时会报错.若报错行可以忽略,则添加以下参数: 样式: pandas.read_csv(***,error_bad_lines=False) pandas.read_csv(filePath) 方法来读取csv文件时,可能会出现这种错误: ParserError:Error tokenizing data.C error:Expected 2 fields in line 407,saw 3. 是指在csv文件的第407行数据,期待2个字段,但在第407行实际发现

  • react创建项目启动报错的完美解决方法

    react创建项目启动报错的完美解决方法

    目录 一.预备知识: 二.创建项目步骤: 三.启动项目时可能出现的报错: 四.Todolist项目相关库: 五.GitHub搜索案例相关库: 六.尚硅谷路由案例相关库: 七.UI库案例相关库: 八.redux相关库: 一.预备知识: npm (也可以用yarn,本文以npm为例) npm介绍 全称为Node Package Manager,是随同NodeJS一起安装的包管理工具. 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • Yii使用DeleteAll连表删除出现报错问题的解决方法

    本文实例讲述了Yii使用DeleteAll连表删除出现报错问题的解决方法.分享给大家供大家参考,具体如下: 删除数据的时候,经常会遇到连联判断删除数据的条件,今天用Yii 的CDbCriteria生成关连条件.批量删除的时候数据库报错. 页面代码为: $criteria=new CDbCriteria; $criteria->join = ' LEFT JOIN {{positions}} p ON p.zpo_id=t.zpo_id '; $criteria->addCondition(&q

随机推荐