读取res.data.data数据后,vue却不渲染不显示,同时也不报错
在练习vue的时候使用axios从后台获取数据返回前端后,想将数据渲染上去的,我原先的想法是获取对应选项,进入详情页,将其数据进行渲染,但是,vue不显示数据,也不报错,代码如下<template><div class="about"><h1>{{id ? '编辑':'新建'}}博客</h1><!-- native表示原生表单,prevent表
·
在练习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]
}
效果如下
更多推荐
已为社区贡献3条内容
所有评论(0)