vue能接收到后台数据，但是页面显示不出来

最新推荐文章于 2024-08-01 22:14:24 发布

:-D:）

最新推荐文章于 2024-08-01 22:14:24 发布

阅读量1.1w

点赞数

本文链接：https://blog.csdn.net/weixin_44780625/article/details/113758493

版权

博客讲述了在Vue项目中遇到的一个问题：虽然通过Ajax从后台获取了数据，但数据无法在页面上显示。原因在于在Ajax回调中，`this`指向错误，不是Vue实例。解决方案是将数据赋值给Vue实例的属性，如`app.stationeryList = JSON.parse(data)`，从而确保数据能正确绑定到视图。

摘要由CSDN通过智能技术生成

遇到这个问题我也是很懵b！

先来看一下我的代码

var app = new Vue({
   
	el: '#app',
	data: {
   
        stationeryList: [],
    },
    methods: {
   
    checkLogin

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

:-D:）

关注关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

详解vue渲染从后台获取的json数据

10-19

Vue.js 是一款轻量级的前端JavaScript框架，它以其组件化、声明式的数据绑定和响应式的视图更新机制而受到广泛欢迎。在实际开发中，我们经常需要从后端服务器获取JSON数据并将其渲染到Vue实例中。Vue.js 提供了便捷...

Vue获取到后台值，但是前端页面不显示、不报错(axios的巨坑)

热门推荐

08-01

1万+

最终原因是axios，then里面是异步返回数据，需要首先整个获取axios，之后再获取返回值获取不到值代码如下。

2 条评论您还未登录，请先登录后发表或查看评论

关于vue数据不显示及页面刷新二三事

class_zy的博客

07-02

3889

今天,在写vue使用element-ui时遇到了一个奇怪的问题,数据不回显,并且不论是input框还是select框都无法显示数据,并且在change事件输出时,发现数据已经赋值成功,但是并未更新到视图层. 于是在百度中寻找答案,没想到还真有很多小伙伴都是这样的情况,很多都说是因为数据层级过深,导致数据更新无法监听到数据的变化,就无法看到数据回显需要加一下代码. this.$forceUpdate() 尝试之后,真的成功了.但是,真的是因为数据层级的原因吗?我在其他地方使用的也是这样的数据结构,而且数据嵌

【网络】UDP协议——传输层、端口号、UDP协议、UDP协议端格式、UDP的特点、UDP的缓冲区、UDP使用注意事项

Crocodile1006的博客

08-01

1659

Linux网络、传输层、端口号、UDP协议、UDP协议端格式、UDP的特点、UDP的缓冲区、UDP使用注意事项、基于UDP的应用层协议

vue2 获取数据或修改数据后，数据不显示在页面

lalalaicool的博客

05-26

2690

笔者在获取数据或修改数据后，有时会出现部分数据显示，部分数据不显示的情况。出现这种情况，大概率是的关系。

解决若依Vue3前后端分离添加动态路由切换菜单页面不显示(空白页面)问题

m0_72837519的博客

07-27

4655

在/layout/components/AppMain.vue找到AppMain.vue文件,添加以下代码即可。今天在做公司新项目时遇到一个问题,在使用若依vue3版本时遇到了添加动态路由页面有时候不显示的问题,在这里添加后,刷新页面也没有显示。最终发现是因为需要给router-view加一个key标志。

解决Vuex从后台获取数据并加载到页面，页面数据不显示问题

letwant的博客

02-15

2165

解决页面数据不显示问题

解决vue后台请求的数据，需要手动刷新页面才能显示

过分安静博客

08-01

1万+

解决vue后台请求的数据，需要手动刷新页面才能显示

vue实现的上传图片到数据库并显示到页面功能示例

10-18

总结，这个示例展示了Vue.js结合后台技术如何实现完整的图片上传和展示流程，包括用户交互、文件上传、服务器处理、数据库存储以及前端数据显示。通过理解这些步骤，开发者可以创建自己的图片上传功能，并根据需求...

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

10-14

综上所述，解决Vue项目打包成APP后API请求不到数据的问题，主要是取消跨域代理，调整API请求的URL为绝对地址，以及检查打包后的路径配置。在遇到不同环境下表现不一致时，应逐一排查网络、设备和代码层面的可能因素...

vue 实现websocket发送消息并实时接收消息

10-15

该项目结合了vue脚手架和websocket，可以应用于需要实时数据交互的场景，如数字货币行情显示、聊天应用、实时通知等。需要注意的是，文中提到的"心跳检测"部分由于项目需求暂时未实现，但在实际开发中是非常关键的一...

Django + Vue + HTTP实现后台管理项目

05-03

Model负责数据的存储和操作，Template处理页面展示，而View则是业务逻辑层，连接模型和模板。在Django中，urls.py文件是路由分发器，根据URL规则将请求分发到相应的视图函数。视图函数处理请求并调用Model，获取数据...

vue实现图片上传到后台

10-15

在Vue.js中实现图片上传至后台是一个常见的需求，通常涉及到前端与后端的交互，以及对用户上传文件的处理。以下是一份详细的步骤说明和示例代码，帮助你理解如何在Vue项目中实现这一功能： 1. **创建上传组件**： ...

使用vue框架 Ajax获取数据列表并用BootStrap显示出来

08-30

在本示例中，我们探讨了如何使用Vue.js框架结合Ajax技术从后台获取JSON数据，并利用Bootstrap库来呈现数据列表。Vue.js是一个轻量级、高性能的JavaScript框架，它允许开发者构建用户界面并实现组件化开发。而Ajax是...

Vue.js 中取得后台原生HTML字符串原样显示问题的解决方法

10-18

在Vue.js中，当从后台获取到的数据是以HTML字符串的形式存在时，为了在前端页面上正确地渲染这些HTML内容，我们需要采取特殊的处理方式。这个问题在标题和描述中已经提出，即“Vue.js 中取得后台原生HTML字符串原样...

vue网站后台登录注册和忘记密码切换页

07-13

由于描述中提到“无后台”，我们可以理解为这是一个纯前端的模拟实现，不涉及实际的服务器端验证。在Vue.js中，我们可以利用组件化开发来构建这些功能。首先，我们需要创建三个主要组件：Login（登录）、Register...

Vue3异步请到后台数据时在渲染时页面不显示或者页面没有数据的问题

k490031的博客

03-28

4939

reactive()应该是响应式实时更新数据的但是打印有数据但是页面没有渲染，只有用push()方法添加到数据中。页面数据打印是有的证明接口已经获取了数据。现在页面已经渲染数据。

前端通过Vue查找后台数据已经传好的JSON数据，前台页面却加载不出来？【已解决】

CSDN_hu123的博客

08-31

2267

把查询数据的方法放在method。再通过mounted里面调用这个method的方式就可以解决了！

Vue3中页面已渲染，但没有数据/已经获得数据，页面没有显示问题

weixin_46105377的博客

03-23

1955

解决方法非常简单：使用v-if(推荐)或v-show

在vue项目中，后台数据做删除处理，页面需要手动刷新

最新发布

09-07

在Vue项目中，如果你希望在后台数据进行删除操作后，页面能够自动刷新以显示最新的数据状态，你可以采用以下几种方法： 1. 刷新整个页面：这是一种简单粗暴的方法，直接让浏览器重新加载页面。这可以通过调用 `window.location.reload()` 方法实现。但这种方法会导致页面的全局状态重置，用户体验不是很好。 2. 使用 axios 的响应拦截器：如果你的项目使用axios来发送HTTP请求，可以利用axios的响应拦截器，在接收到删除操作的成功响应后，手动刷新当前视图或者组件。例如： ```javascript // 全局 axios 请求拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); // 特定组件中使用 axios 发送删除请求 axios.delete('your-delete-url') .then(response => { // 删除成功后可以刷新视图 this.$forceUpdate(); // Vue 2 // 或者在 Vue 3 中，可以通过调用组件的重新渲染方法 }) .catch(error => { // 处理错误 }); ``` 3. 路由跳转：在删除操作成功后，可以通过路由跳转的方式返回到之前的列表页面，这样可以触发Vue的路由守卫，从而更新数据。例如： ```javascript axios.delete('your-delete-url').then(response => { // 删除成功后，跳转回列表页面 this.$router.push('/list'); }).catch(error => { // 处理错误 }); ``` 这种方法不会刷新整个页面，而是在Vue路由的管理下进行页面跳转，从而实现数据的更新。 4. 使用事件总线（Event Bus）：如果你的项目中组件间通信较为复杂，可以使用事件总线来监听删除操作完成的事件，并在事件触发时更新数据。例如： ```javascript // 删除操作组件 axios.delete('your-delete-url').then(() => { // 触发事件通知其他组件 this.$bus.$emit('refresh-data'); }); // 需要更新数据的组件 created() { this.$bus.$on('refresh-data', this.fetchData); }, methods: { fetchData() { // 重新获取数据的方法 } } ```