记一次vue2路由参数传递this指针问题
需要船体一个data()内的对象到另一个页面。
<player-card v-for="(note, key) in sortedtNodes"
:imgurl="note.avarUrl"
:playerId="note.playerId"
:title="note.playerName"
:label="note.kIndex"
@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: this.date }})"></player-card>
在跳转到的页面却并没有获取到,手动打印一下是这样的结果:
尝试将参数设置为固定值:dateFroHome: '2017-04-28'这样后端是可以获取到的。所以这里确定是this指针问题。
所以这里的dateFroHome: this.date 的this是player-card组件里的this吧。
问题找出来了,怎么解决呢?
看了下官方文档《组件数据流》中的内容:
简单来说vue是不允许将父组件中的对象引用直接传递给子组件的,为了应对这种情况,vue提供了两种方法:
1.定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2.定义一个计算属性,处理 prop 的值并返回。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
可以看这样就能保证父组件的属性this.xxx都保留在父组件中给你了。
所以我修改了一下项目:
在父组件的computed中定义一个啥啥啥:
computed: {
thisDate: function () {
var this_date = this.date;
return this_date;
}
}
然后直接传递这个thisDate就可以了:
@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: thisDate }})"
记一次vue2路由参数传递this指针问题的更多相关文章
- 记一次服务器路由跟踪 (2019-01-23 TODO)
记一次服务器路由跟踪 有用户反馈网站 无法访问. 现象如下: ping 没有反馈,确认了可以 ping 通其它的网站. tracert 跟踪到服务器商的内部就没的反应了. 同样一家的服务器商,另外一台 ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- c指针作为参数传递以及指针的指针
指针作为函数参数传递 函数参数传递的只能是数值,所以当指针作为函数参数传递时,传递的是指针的值,而不是地址. #include "stdio.h" void pointer(int ...
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- vue2路由
我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由. 首先要引入的是vue2与路由文件. js代码: <script> ...
- golang 结合实例更好的理解参数传递和指针
关于参数传递 其实go的参数传递,核心就是一句话:go里所有参数传递都是值传递,既把参数复制一份放到函数里去用. go的函数传参,不管参数是什么类型,都会复制一份,然后新的参数在函数内部被使用. 不像 ...
- angular路由详解三(路由参数传递)
我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"} => address/1 => Activa ...
- 记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)
var app= angular .module('app', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngSanitize', 'ngTouch', ' ...
- React-页面路由参数传递的两种方法
list页->detail页 方法一:路由参数 路由导航: 用“/” <Link to={'/detail/'+item.get('id')} key={index}> 路由map: ...
随机推荐
- css3翻书效果
强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...
- Java String lastIndexOf() 方法
Java String lastIndexOf() 方法 测试代码 public class Test { public static void main(String[] args) { // -- ...
- hdu 4135 Co-prime (素数打表+容斥原理)
题目链接 题意:问从A到B中与N互素的个数. 题解: 利用容斥原理:先求出与n互为素数的个数. 可以先将 n 进行素因子分解,然后用区间 x 除以 素因子,就得到了与 n 的 约数是那个素因子的个数, ...
- 【ASP.NET MVC】提高页面加载速度:脚本优化
在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...
- gvim代码补全
gvim 代码自动提示 插件 插件名:AutoComplPop 下载地址:http://www.vim.org/scripts/script.php?script_id=1879 gvim 代码模板补 ...
- 差分【bzoj3043】IncDec Sequence
Description 给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一. 问至少需要多少次操作才能使数列中的所有数都一样,并求出在保证 ...
- [BZOJ 4537][Hnoi 2016]最小公倍数
传送门 并查集+分块 看到题目可以想到暴力做法, 对于每个询问, 将所有a和b小于等于询问值的的边加入图中(用并查集), 如果询问的u和v在一个联通块中, 且该联通块的maxa和maxb均等与询问的a ...
- 【无源汇有上下界可行流】ACdream1211-Reactor Cooling
[题意] 给出一些边流量的上界和下界,问能否循环流通. [思路] 黄学长讲得很清楚,直接贴过来: 上界用ci表示,下界用bi表示. 下界是必须流满的,那么对于每一条边,去掉下界后,其自由流为ci– b ...
- Java学习笔记(11)
自定义异常类: 自定义异常类的步骤:自定义一个类继承Exception即可 public class CustomClass { public static void main(String[] ar ...
- Problem E: 12306
#include <stdio.h> struct student{ int n; int m;}; int main(void) { int T; int k,g,i,j; ],max; ...