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 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
详谈js模块化规范
Jul 07 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
vue element自定义表单验证请求后端接口验证
Dec 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php文件上传类完整实例
2016/05/14 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
JavaScript模块详解
2017/12/18 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
pycharm设置注释颜色的方法
2018/05/23 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python中的colorlog库使用详解
2019/07/05 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Python内置函数property()如何使用
2020/09/01 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
C语言50道问题
2014/10/23 面试题
国际贸易专业求职信
2014/06/04 职场文书
汽修专业自荐信
2014/07/07 职场文书
工程部部长岗位职责
2015/02/12 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript