在vuejs 中使用axios不能获取属性data的解决方法
Laravel5.4 vuejs和axios使用钩子mounted不能获取属性data的解决方法
//出错问题:
在then
这个里边的赋值方法this.followed = response.data.followed
会出现报错,什么原因呢?原来是在 then
的内部不能使用Vue的实例化的this
, 因为在内部 this
没有被绑定。解决:self.followed = response.data.followed;或者使用
ES6
的 箭头函数arrow function
,箭头方法可以和父方法共享变量。
Here is my code:
数据属性:
data(){
return {
followed : false,
}
},
axios请求数据:
// mounted 方法为钩子,在Vue实例化后自动调用
mounted() {
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then(function(response){
// console.log(response.data);
this.followed = response.data.followed;
})
},
出错问题:
在then
这个里边的赋值方法this.followed = response.data.followed
会出现报错,什么原因呢?在Google上查了下,原来是在 then
的内部不能使用Vue的实例化的this
, 因为在内部 this
没有被绑定。
可以看下 Stackoverflow 的解释:
In option functions like
data
andcreated
, vue bindsthis
to the view-model instance for us, so we can usethis.followed
, but in the function insidethen
,this
is not bound.
So you need to preserve the view-model like (created
means the component's data structure is assembled, which is enough here, mounted
will delay the operation more):
解决方法:
created() {
var self = this;
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then(function(response){
// console.log(response.data);
self.followed = response.data.followed;
})
},
或者我们可以使用 ES6
的 箭头函数arrow function
,箭头方法可以和父方法共享变量 :
created() {
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then((response) => {
this.followed = response.data.followed;
})
},
完整代码:
<script>
export default {
// 为父组件传递到子组件的属性值,子组件使用props方法接收
props:['question', 'user'],
// mounted 方法为钩子,在Vue实例化后自动调用
mounted() {
/** 这种旧的写法会在Laravel5.4中报错
this.$http.post('/api/question/follower', {'question':this.question, 'user':this.user}).then(response => {
console.log(response.data);
})
*/
axios.post('/api/question/follower', {
'question':this.question,
'user':this.user
}).then(function(response){
// console.log(response.data);
this.followed = response.data.followed;
})
},
data(){
return {
followed : false,
}
},
computed:{
text(){
return this.followed ? '已关注' : '关注该问题';
}
},
methods:{
// 关注动作
follow(){
axios.post('/api/question/follow', {
'question':this.question,
'user':this.user
}).then(function(response){
this.followed = response.data.followed;
})
}
}
}
</script>
在vuejs 中使用axios不能获取属性data的解决方法的更多相关文章
- jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法
jquery-easyui的datagrid在checkbox多选时,行选中不正确应,去除高亮的解决方法 工作中用到一个具有多选功能的easyui-datagrid在处理cell的点击事件时,不同 ...
- [datatable]关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法
-- :09关于在DataTable中执行DataTable.Select("条件")返回DataTable的解决方法 在实际编程工程中,常常遇到这样的情况:DataTable并不 ...
- 检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下:
检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第 一步:首先将msvcr71.dll, SQLD ...
- log4j中Spring控制台输出Debug级信息过多解决方法
log4j中Spring控制台输出Debug级信息过多解决方法 >>>>>>>>>>>>>>>>> ...
- universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...
- MySQL中遇到的几种报错及其解决方法
MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...
- Eclipse中SVN修改的*星号没了,解决方法
Eclipse中SVN修改的*星号没了,解决方法 打开Preference 第一步:去掉外加的 ">" 第二步:勾选Outgoing changes 这样做之后," ...
- BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...
- Python3中使用HTMLTestRunner报No module named 'StringIO'解决方法
今天在学习使用HTMLTestRunner生成测试报告时遇到一个报错,如图所示: 网上搜索了下“No module named 'StringIO'”解决方法,原来我用的是Python 3.X版本,而 ...
随机推荐
- PHP中遍历关联数组的方法
下面介绍PHP中遍历关联数组的三种方法:foreach <?php $sports = array( 'football' => 'good', 'swimming' => 'ver ...
- 希尔伯特空间(Hilbert Space)
欧氏空间 → 线性空间 + 内积 ⇒ 内积空间(元素的长度,元素的夹角和正交) 内积空间 + 完备性 ⇒ 希尔伯特空间 0. 欧几里得空间 欧氏空间是一个特别的度量空间,它使得我们能够对其的拓扑性质, ...
- Linux性能测试 ps命令
名称:ps 使用权限:所有使用者 使用方式:ps [options] [--help] 说明:显示瞬间行程 (process) 的动态 参数: ps 的参数非常多, 在此仅列出几个常用的参数并大略介绍 ...
- javascript自定义事件讲解
自定义事件 什么是自定义事件? 自定义事件:这要是跟函数有关系,就是让函数能够具备事件的某些特性 为什么要使用自定义事件? 有利于多人协作开发代码,一同开发不冲突 如何去挂载自定义事件与事件函数? 1 ...
- 最新用WPF为触摸屏写了一个手写程序,双格输入的
原文:最新用WPF为触摸屏写了一个手写程序,双格输入的 双格输入可以提高手写速度,当前字写完以后可以自动识别提交,写下一个字.这样比单格手写速度提高一倍.特别适合触摸屏程序使用 界面如下: 程序如下: ...
- 用WPF轻松打造iTunes CoverFlow效果
原文:用WPF轻松打造iTunes CoverFlow效果 用WPF轻松打造iTunes CoverFlow效果 ...
- FFmpeg来源简单分析:结构会员管理系统-AVClass
===================================================== FFmpeg章列表: [架构图] FFmpeg源码结构图 - 解码 FFmpeg源码结构图 ...
- 2-22-实现jsp通过tomcat连接mysql
所有软件的版本如下: MySQL-Connector-Java: mysql-connector-java-5.1.36 Tomcat: apache-tomcat-8.0.26 JDK: jdk-8 ...
- WPF编游戏系列 之五 数据绑定
原文:WPF编游戏系列 之五 数据绑定 在上一篇通过用户控件将重复使用的控件封装为一个控件组,大大减少了C#代码数量,本篇继续对该控件组进行数据绑定,节省为每个控件赋值的工作.对于数据绑 ...
- DataContext和ItemSource
一对多的关系DataContext为上下文,绑定数据源ItemSource取上下文中的某属性,会一级一级往上找属性 一般ItemSource的绑定,绑定到Grid/DataGrid一类容器上,底下的控 ...