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 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
各种战术和打法的原创者
2020/03/04 星际争霸
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
HTML的form表单和django的form表单
2019/07/25 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python requests获取网页常用方法解析
2020/02/20 Python
体育老师的教学自我评价分享
2013/11/19 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
男方父母证婚词
2014/01/12 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
中学生差生评语
2014/01/30 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
学校对教师的评语
2014/04/28 职场文书
房产公证书格式
2015/01/26 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android