vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問題及解決

更新時(shí)間：2022年09月08日 08:37:05 投稿：jingxian

這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)

const app = require('express')()
// 跨域設(shè)置
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啟動(dòng)了一個(gè)簡單的node服務(wù)器寫了一個(gè)測(cè)試接口

vue/cli創(chuàng)建的vue3項(xiàng)目，頁面中通過接口獲取的數(shù)據(jù)，注意第二個(gè)屬性dict

現(xiàn)在我們用對(duì)象賦值的方法將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>

查看打印結(jié)果

報(bào)錯(cuò)了，但是頁面能渲染

如果我們把動(dòng)態(tài)數(shù)據(jù)綁定的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>

打印結(jié)果

沒有報(bào)錯(cuò)，且能渲染

總結(jié)：通過樓主查閱各種文檔的細(xì)心研磨，發(fā)現(xiàn)vue3的動(dòng)態(tài)數(shù)據(jù)綁定，在進(jìn)行proxy代理的時(shí)候，get方法中的return返回時(shí)，使用了reflect反射來綁定this的指向

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

我認(rèn)為，如果初始值為null，會(huì)導(dǎo)致this指向null，引發(fā)這個(gè)報(bào)錯(cuò)問題，目前樓主認(rèn)為是這個(gè)原因?qū)е碌摹?/p>

vue在渲染數(shù)據(jù)的時(shí)候的一些報(bào)錯(cuò)問題

問題描述

vue在請(qǐng)求獲取數(shù)據(jù)的時(shí)候，這個(gè)過程是異步的，但是剛進(jìn)頁面的時(shí)候，數(shù)據(jù)還未被獲取到，是為空的，如果再次點(diǎn)擊拿下一層數(shù)據(jù)時(shí)沒辦法拿到數(shù)據(jù)的，會(huì)報(bào)錯(cuò)

解決方法

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

ii可以在data中使用null，但是在渲染數(shù)據(jù)的外面的包一個(gè)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//剛進(jìn)來的時(shí)候是null，上面使用rank_list還未獲取數(shù)據(jù)，會(huì)報(bào)錯(cuò)，解決方法這里不使用Null，用{},方法二這里可以使用null,然后在渲染數(shù)據(jù)外面包一個(gè)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中請(qǐng)求數(shù)據(jù)的時(shí)候，同一個(gè)數(shù)據(jù)有的是數(shù)據(jù)是不存在的，有的是存在的，如果直接寫會(huì)報(bào)錯(cuò)，這時(shí)候可以在沒有的那個(gè)數(shù)據(jù)名后面加?l來作為判斷，之后再往下點(diǎn)一層

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: