vue3接口數(shù)據(jù)賦值對象,渲染報錯問題及解決

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

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

vue3接口數(shù)據(jù)賦值對象,渲染報錯

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創(chuàng)建的vue3項目，頁面中通過接口獲取的數(shù)據(jù)，注意第二個屬性dict

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

查看打印結果

報錯了，但是頁面能渲染

如果我們把動態(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>

打印結果

沒有報錯，且能渲染

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

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

我認為，如果初始值為null，會導致this指向null，引發(fā)這個報錯問題，目前樓主認為是這個原因導致的。

vue在渲染數(shù)據(jù)的時候的一些報錯問題

問題描述

vue在請求獲取數(shù)據(jù)的時候，這個過程是異步的，但是剛進頁面的時候，數(shù)據(jù)還未被獲取到，是為空的，如果再次點擊拿下一層數(shù)據(jù)時沒辦法拿到數(shù)據(jù)的，會報錯

解決方法

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

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

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

您可能感興趣的文章: