解决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 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
微信小程序通过websocket实时语音识别的实现代码
Aug 19 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python实现操作文件(文件夹)
2019/10/31 Python
python 异步async库的使用说明
2020/05/04 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
Java面试题及答案
2012/09/08 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
护士个人自我鉴定
2014/03/24 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
工作态度检讨书范文
2015/05/06 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers