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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
jQuery 创建Dom元素
May 07 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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的简单采集数据入库程序【续篇】
2014/07/30 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php工具型代码之印章抠图
2018/07/18 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python编程实现正则删除命令功能
2017/08/30 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
网上签名寄语活动留言
2014/01/18 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
学校与家长安全责任书
2014/07/23 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
入党自传范文2015
2015/06/26 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
老兵退伍感言
2015/08/03 职场文书
话题作文之生命的旋律
2019/12/17 职场文书