读取res.data.data数据后，vue却不渲染不显示，同时也不报错

最新推荐文章于 2024-10-08 14:52:32 发布

吾处话凄凉

最新推荐文章于 2024-10-08 14:52:32 发布

阅读量4.3k

点赞数 4

分类专栏：问题报错 bji 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_43054210/article/details/111243169

版权

问题报错同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

bji

3 篇文章 0 订阅

订阅专栏

在练习vue的时候使用axios从后台获取数据返回前端后，想将数据渲染上去的，我原先的想法是获取对应选项，进入详情页，将其数据进行渲染，但是，vue不显示数据，也不报错，代码如下

<template>
    <div class="about">
        <h1>{{id ? '编辑':'新建'}}博客</h1>
        <!-- native表示原生表单,prevent表示不要跳转 -->
        <el-form label-width = 120px @submit.native.prevent="save">
            <el-form-item label="标题">
                <el-input v-model="model.title"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input v-model="model.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        props:{
            id: {}
        },
        data(){
            return {
                model:{}
            }
        },
        methods:{
            async save(){
                const res = await this.$http.post('/api/blog/create',this.model)
                console.log(res)
                this.$router.push('/blog/list')/
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })

            },
            async fetch(){
                const res = await this.$http.get(`/api/blog/edit/${this.id}`)
                this.model = res.data.data
            }

        },
        created(){
            this.id && this.fetch()//有id的时候进行
        }
    }
</script>

实际效果却是内容不显示，如下

在这里插入图片描述

解决方案

后面发现穿回来的是个数组，并不能直接简单粗暴的赋值res.data.data
，而应该是

async fetch(){
                const res = await this.$http.get(`/api/blog/edit/${this.id}`)
                this.model = res.data.data[0]
            }