解决vue做详情页跳转的时候使用created方法 数据不会更新问题


Posted in Javascript onJuly 24, 2020

大家在做项目的时候肯定会遇到携带某个参数跳转到详情页 然后取这个参数,下面是重点

刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的 你在回到父页面在点击进详情页发现取到的数据跟原来的一模一样根本没有发生改变(因为router跳转时是不会刷新页面的所以导致我取得值永远不能更新),我以为是cookie有问题了后来又用了query携带参数跳转,sessionStorage方法存取发现都不行,

看下图解决办法

解决vue做详情页跳转的时候使用created方法 数据不会更新问题

解决vue做详情页跳转的时候使用created方法 数据不会更新问题

我也不知道其中是什么原理 没搞明白 但是解决了问题了,看了文档还是没理解这两个方法具体区别。

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

父子组件通信

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

例如:

父组件中

<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="chart-title">数据统计</header>
      <el-row :gutter="20" class="chart-head">
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">统计:</div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售数量 <span>{{number}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售金额 <span>{{amount}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利润统计 <span>{{profits}}</span></div></el-col>
      </el-row>
    </section>
    <chart :chartData="chartData"></chart>
  </div>
</template>

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: [10,10,10]
      }
    },
</script>

子组件中

export default {
  props: ['chartData']
}

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

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

比如下面这个情况

父组件中

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: []
      }
    },
    mounted(){
      this.getStatistics();
    },
    methods: {
      //获取统计数据
      getStatistics(){
        console.log('获取统计数据')
        axios.post(api,{

        }).then((res) => {
          this.number = res.data.domain.list[0].number;
          this.amount = res.data.domain.list[0].amount;
          this.profits = res.data.domain.list[0].profits;
          this.chartData = [this.number,this.amount,this.profits];
        }).catch((err) => {
          console.log(err);
        })
      },
    },
</script>

此时子组件的methods中使用this.chartData会发现是不存在的(因为为空了)

这情况我是使用watch处理

解决方法如下:

使用watch

props: ['chartData'],
    data(){
      return {
        cData: []
      }
    },
    watch: {
      chartData: function(newVal,oldVal){
        this.cData = newVal; //newVal即是chartData
        this.drawChart();
      }
    },

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

以上这篇解决vue做详情页跳转的时候使用created方法 数据不会更新问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
You might like
生成缩略图
2006/10/09 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python列表推导式实现代码实例
2020/09/09 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
企业文化建设实施方案
2014/03/22 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
酒后驾车标语
2014/06/30 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
学生个人评语大全
2015/01/04 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
企业培训简报范文
2015/07/20 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python