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中使用mockjs代码实例
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
VUE递归树形实现多级列表
Jul 15 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
php利用header函数下载各种文件
2016/08/24 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
初中同学聚会邀请函
2014/02/03 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年内勤工作总结
2014/11/24 职场文书
讲座通知范文
2015/04/23 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
JavaScript前端面试组合函数
2022/06/21 Javascript