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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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 memcache扩展的三种安装方法
2009/04/26 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
javascript读取xml
2006/11/04 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript Keycode对照表
2009/10/24 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
scrapy爬虫完整实例
2018/01/25 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
临床护士自荐信
2014/01/31 职场文书
公务员综合考察材料
2014/02/01 职场文书
元旦活动感言
2014/03/08 职场文书
活动总结格式范文
2014/04/26 职场文书
档案工作汇报材料
2014/08/21 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python