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生命周期的深入理解
Dec 03 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 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/02 无线电
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
浅析python标准库中的glob
2020/03/13 Python
重构Python代码的六个实例
2020/11/25 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
以幸福为主题的活动方案
2014/08/22 职场文书
监察建议书
2015/02/04 职场文书
2019年大学推荐信
2019/06/24 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技