vue data有值,但是页面{{}} 取不到值的解决


Posted in Javascript onNovember 09, 2020

我的问题出在js引入的顺序不对,导致不能正常显示vue中的值

正确的顺序应该是:

先引入vue的js--------html代码-----最后引入自己写的js

补充知识:vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题

父子组件通信

这个很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 。

例如:在父组件中

<template>
 <div>
  <div :Data="Data"></div>
 </div>
</template>
<script>
 data(){
   return {
    Data: [10,20,30]
   }
  },
</script>

子组件中:

export default{
 props:{
 type:Array,
 default(){
 return []
 }
 }
}

这种情况下你的Data值是固定的,子组件的 methods 中想要取到props中的值,直接使用 this.chartData 即可 。

但是有的情况下,你的Data 里面的值并不是固定的,而是动态获取的,这种情况下,你会发现 methods 中是取不到你的 Data 的,或者取到的一直是默认值。

解决办法:

这种情况我是使用watch处理

监听 Data 的值,当它由空转变时就会触发,这时候就能取到了,拿到值后要做的处理方法也需要在 watch 里面执行。

export default {
 props: ['Data'],
  data(){
   return {
    cData: []
   }
  },
  watch: {
   //正确给 Data 赋值的 方法
   chartData: function(newVal,oldVal){
    this.cData = newVal; //newVal即是chartData
    newVa l&& this.draw(); //newVal存在的话执行draw函数
   }
  },
  methods: {
   draw(){
    //执行其他逻辑
   }
  },

 
  mounted() {
   //在created、mounted这样的生命周期, 给 this.Data赋值会失败,错误赋值方法 
  }
 }

//总结

出现这种情况的原因, 因为父组件中要传递的 props 属性 是通过 发生ajax请求回来的, 请求的这个过程是需要时间的,但是子组件的渲染要快于ajax请求过程,所以此时 created 、 mounted 这样的只会执行一次的生命周期钩子,已经执行了,但是 props 还没有流进来(子组件),所以只能拿到默认值。

以上这篇vue data有值,但是页面{{}} 取不到值的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 #Javascript
Webpack的Loader和Plugin的区别
Nov 09 #Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 #Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 #Javascript
详解nginx配置vue h5 history去除#号
Nov 09 #Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 #Javascript
You might like
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
对Django url的几种使用方式详解
2019/08/06 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
法学毕业生自我鉴定
2013/11/08 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
政风行风建设整改方案
2014/10/27 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
实习报告范文
2019/07/30 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang