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打开其他项目页面并传入数据详解
Nov 25 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
Vue router配置与使用分析讲解
Dec 24 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
超级简单的发送邮件程序
2006/10/09 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python 含参构造函数实例详解
2017/05/25 Python
基于python的Paxos算法实现
2019/07/03 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
前台接待的工作职责
2013/11/21 职场文书
六十大寿答谢词
2014/01/12 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Django使用channels + websocket打造在线聊天室
2021/05/20 Python