vue 获取到数据但却渲染不到页面上的解决方法


Posted in Vue.js onNovember 19, 2020

能获取到数据 数据却渲染不到页面上

问题描述: 我数据全部拿到了,js 里面写 console.log( musics ) 数据打印出来都正确,但是页面里面就是不显示。

很多时候对数据进行处理了,但是页面上就是没变化,没效果,用 console.log 打印数据都没问题,特别是数组、对象容易出现这个问题;

1、 this.$set( xxx )
保存变量

2、this.$forceUpdate( xxx )
强制更新,迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

另外:另外变量名别冲突,如下这种憨p情况

<script>
export default {
  name: 'xxx',
  props: {
    musics: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      musics:[]
    }
  }
</script>

解决办法:
将 js 代码 data 中 musics:[ ] 删除,

到此这篇关于vue 获取到数据但却渲染不到页面上的解决方法的文章就介绍到这了,更多相关vue 获取数据但渲染不上内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
详解Vue的mixin策略
Nov 19 #Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
You might like
咖啡语言
2021/03/03 咖啡文化
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
Python装饰器的函数式编程详解
2015/02/27 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python pygame实现方向键控制小球
2019/05/17 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
《陋室铭》教学反思
2014/02/26 职场文书
学习之星事迹材料
2014/05/17 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
个性与发展自我评价
2015/03/06 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
索尼ICF-5900W收音机测评
2022/04/24 无线电