Vue发axios请求,数据成功拿到,但是不能渲染到页面的问题

Vue发axios请求,数据成功拿到,但是不能渲染到页面的问题。

昨天还还好的项目,今天开服务器代理报错。一开始以为代理有问题,就各种搜,无效。
最后竟然发现是接口出了问题!!!
找到新的接口后,拿到数据,但是还是无法渲染到页面,又是各种搜。。。
最后看工具,发现JSON数据获取的是对象,我按着数组处理的,肯定不对啊。。。太蠢了。。以下是我修改的过程,希望可以帮到你

  1. 查看JSON数据格式
    获取到的JSON是对象中包含数组在这里插入图片描述
  2. 返回查看发请求的代码

这是改之前的错误代码

mounted() {
    this.axios.get(`/ajax/cinemaList`).then(
      response => {
        // console.log(response.data)
        var cinemas = response.data
        // console.log(cinemas)
        if (cinemas) {
          this.cinemas = response.data // 此处的this.cinemas是一个对象!! 
          this.isLoading = false
        }
        console.log(this.cinemas)
      }
    )
  }
  1. 修改后
mounted() {
    this.axios.get(`/ajax/cinemaList`).then(
      response => {
        // console.log(response.data);
        var cinemas = response.data
        // console.log(cinemas)
        if (cinemas) {
          this.cinemas = response.data.cinemas // 修改后
          this.isLoading = false
        }
        console.log(this.cinemas)
      }
    )
  }
  1. 好了,解决了,大家不要像我一样这么傻啊。。。
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是使用Vue3和Axios实现登录页和注册页的示例代码。 首先,需要在项目中安装vueaxios两个库: ``` npm install vue axios --save ``` 然后,我们可以编写两个组件:`LoginPage`和`RegisterPage`,分别用来展示登录页和注册页。在这两个组件中,我们可以使用`reactive()`函数来创建一个响应式状态对象,包含用户填写的表单数据和后端返回的数据。在提交表单时,我们使用`axios.post()`方法向后端请求,并将响应数据赋值给响应式状态对象中的`data`属性。 下面是示例代码: LoginPage.vue ```html <template> <div> <h1>登录页</h1> <form @submit.prevent="submitForm"> <label> 用户名: <input type="text" v-model="form.username" required> </label> <br> <label> 密码: <input type="password" v-model="form.password" required> </label> <br> <button type="submit">登录</button> </form> <div v-if="data">{{ data }}</div> </div> </template> <script> import axios from 'axios'; import { reactive } from 'vue'; export default { setup() { const form = reactive({ username: '', password: '', }); const data = reactive({ message: '', }); const submitForm = async () => { try { const response = await axios.post('/api/login', form); data.message = response.data; } catch (error) { console.error(error); } }; return { form, submitForm, data, }; }, }; </script> ``` RegisterPage.vue ```html <template> <div> <h1>注册页</h1> <form @submit.prevent="submitForm"> <label> 用户名: <input type="text" v-model="form.username" required> </label> <br> <label> 密码: <input type="password" v-model="form.password" required> </label> <br> <button type="submit">注册</button> </form> <div v-if="data">{{ data }}</div> </div> </template> <script> import axios from 'axios'; import { reactive } from 'vue'; export default { setup() { const form = reactive({ username: '', password: '', }); const data = reactive({ message: '', }); const submitForm = async () => { try { const response = await axios.post('/api/register', form); data.message = response.data; } catch (error) { console.error(error); } }; return { form, submitForm, data, }; }, }; </script> ``` 在上面的示例代码中,我们使用了Vue3的`setup()`函数来组织代码。在`setup()`函数中,我们使用了`reactive()`函数来创建响应式状态对象,包含了用户填写的表单数据`form`和后端返回的数据`data`。在提交表单时,我们使用`axios.post()`方法向后端请求,并将响应数据赋值给`data.message`,从而触Vue的响应式系统更新视图。 最后,我们在模板中通过`v-if`指令来判断`data`是否存在,如果存在,则显示后端返回的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值