vue——数据已更新但视图一直不渲染
2023-09-27 14:29:10 时间
想实现的效果
请求接口获取待办数目和链接,当数目>0时,点击数目跳转链接。
出现的问题
页面上待办数目为0,但是打印弹窗发现待办数目为1,点击页面上显示的0仍可以跳转链接
原因
在请求待办时,我还请求了列表。但是列表返回的数据是null,页面上又判断了列表的长度。造成了浏览器报错,所以就没有再继续渲染
代码
<template> <div> <p @click="toLink(count,url)">待办数目:{{count}}</p> <div v-if="list.length"> <p v-for="(item,index) in list" :key="index"> 列表{{item}} </p> </div> </div> </template> <script> import API from '../api' export default { data() { return { count: 0, url: '', list: [] } }, mounted() { const that = this that.getNum() that.getList() }, methods: { getNum() { const that = this const timestamp = new Date().getTime() that.$get(API.num + '?t=' + timestamp).then(res => { if (res.code === 200) {
const _data = res.data // 最好改为 cons _data = res.data || {} that.count = _data.count // 最好改为 that.count = _data.count || 0 that.url = _data.url // 最好改为 that.url = _data.url || '' } }) }, toLink(num, url) { if (parseInt(num) > 0) { window.open(url) } }, getList() { const that = this const timestamp = new Date().getTime() that.$get(API.list + '?t=' + timestamp).then(res => { if (res.code === 200) { that.list = res.data // <== 出现问题的地方 应改为 that.list = res.data || [] 避免返回null或undefined的情况 } }) } } } </script>
相关文章
- (尚056) Vue_源码分析_数据绑定与数据劫持介绍
- 转载:手把手教你搭建 vue 环境
- vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件
- vue.js--基础 数据的双向绑定
- vue - check-versions.js for child_process
- VUE版报名成功数据滚动
- 【Vue】Vue-cli(脚手架)中的main.js内容解读
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- Vue - 让模板等待接口请求数据完毕后再进行渲染页面(先加载完所有数据再渲染页面)
- light-mvvm:JavaScript 超轻量级 MVVM 双向数据绑定插件(迷你Vue)
- [转]Vue导出json数据到Excel表格
- Vue: pinia
- vue常用
- vue性能优化1--懒加载
- vue.js格式使用vant-页面引入3
- vue-loader作用
- Vue+Echarts监控大屏实例八:智慧社区监控模板实例
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- 【毕业设计_课程设计】基于Django和vue的微博用户情感分析系统
- vue-router4之嵌套路由
- vue项目集成mock.js
- vue中router-link的详细用法
- vue-wabpack环境配置
- Vue循环数据增加横线(非表格)
- 05-vue-cli-路由配置
- antd design vue 设置 v-decorator 的初始值
- 一、vue+element ui 中勾选复选框获取列表当前行数据
- Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)
- IDEA打开启动Vue项目和Vue文件
- 详解基于vue,vue-router, vuex以及addRoutes进行权限控制
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用