解决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 常用关键字列表集合
Dec 04 Javascript
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
Vue formData实现图片上传
Aug 20 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
PHP正确配置mysql(apache环境)
2011/08/28 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
js判断密码强度的方法
2020/03/18 Javascript
python Django批量导入数据
2016/03/25 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Python之web模板应用
2017/12/26 Python
Python爬豆瓣电影实例
2018/02/23 Python
对python 自定义协议的方法详解
2019/02/13 Python
python tkinter实现屏保程序
2019/07/30 Python
python常用数据重复项处理方法
2019/11/22 Python
利用Python优雅的登录校园网
2020/10/21 Python
python时间time模块处理大全
2020/10/25 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
公司委托书格式范本
2014/09/16 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript