vue.js - 如何从 vue 中的回调中访问局部组件变量?
问题描述
我正在尝试使用 api rest 命令设置我的 components 变量。我想通过它自己的文件中名为 handleResponse() 的函数来处理所有响应,如下所示。
// api/tools/index.js
function handleResponse (promise, cb, cbError) {
var cbErrorRun = (cbError && typeof cb === "function")
promise.then(function (response) {
if (!response.error) {
cb(response)
}
else if (cbErrorRun) {
cbError(response)
}
}).catch(function (error) {
console.log(error)
if (cbErrorRun) {
var responseError = {
"status": 404,
"error": true,
"message": error.toString()
}
cbError(responseError)
}
})
}
export {handleResponse}
在我的组件文件中,我有这个
.... More above....
<script>
import { fetchStock } from '@/api/stock'
export default {
data () {
return {
stock: {},
tabs: [
{
title: 'Info',
id: 'info'
},
{
title: 'Listings',
id: 'listings'
},
{
title: 'Company',
id: 'company'
}
],
}
},
validate ({params}) {
return /^\d+$/.test(params.id)
},
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
fetchStock(
params,
function(response) { //on successful data retrieval
this.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
function(responseError) { //on error
console.log(responseError)
}
)
}
}
</script>
当前代码给了我这个错误:“Uncaught (in promise) TypeError: Cannot set property 'stock' of undefinedAc”。我认为发生这种情况是因为我在 fetchStock 函数中传递的回调中不再可以访问“this”。如何在不更改当前 handleResponse 布局的情况下解决此问题。
解决方案
你可以试试这个技巧
created: function() {
var params = {'id': this.$route.params.stockId}
//this.$route.params.stockId}
var self = this;
fetchStock(
params,
function(response) { //on successful data retrieval
self.stock = response.data.payload // payload = {'name': test123}
console.log(response)
},
function(responseError) { //on error
console.log(responseError)
}
)
}
推荐阅读
- python - 未见数据中不存在虚拟变量级别
- c# - C# StreamWriter 替换值的字符
- batch-file - 有没有办法在批处理脚本的变量中添加多行?
- php - 3 分钟后 504 网关超时(Docker 中的 Apache)
- python - 将 pandas 数据框放在 django 模板中
- c# - 使用 EF 将来自 API 的数据加入 SQL 表
- python - 如何在 django CSV 导出中动态更改附件文件名?
- pandas - 获取多个数据框名称作为列表
- spring - 错误消息:org.hibernate.NonUniqueObjectException:具有相同标识符值的不同对象已与会话关联
- swift - 在 Credimax Mastercard Payment API 中创建订单和交易