Vuejs2 这将在Vue实例中实现
Vue新手,在Vue实例中遇到了问题。我的vue数据对象是:Vuejs2 这将在Vue实例中实现,vuejs2,this,Vuejs2,This,Vue新手,在Vue实例中遇到了问题。我的vue数据对象是: new Vue({ el: "#app", data() { return { vm_instance_data: [], standings: [], currentTab: "", tabs: ["MLB", "NFL", "NBA"], isCompleted: false, gameDate: date.yesterday.substr(4
new Vue({
el: "#app",
data() {
return {
vm_instance_data: [],
standings: [],
currentTab: "",
tabs: ["MLB", "NFL", "NBA"],
isCompleted: false,
gameDate: date.yesterday.substr(4, 2) + "." + date.yesterday.substr(6, 2),
loading: false,
errored: false
};
}
然后在我的方法对象中,我有:
methods: {
getSportsData: function(tab) {
let url = "";
this.currentTab = tab; // Set the currentTab
//====== Get Standings From MySportsFeeds Site ======================================== //
url = `https://api.mysportsfeeds.com/v1.2/pull/mlb/2018-regular/division_team_standings.json?teamstats=W,L,GB,Win %`;
/* jshint ignore:start */
async function getStandings() {
console.log(this);
this.standings = await mySportsFeeds.feedsData(url);
console.log('standings is: ' + this.standings);
}
getStandings();
/* jshint ignore:end */
// ======= end Standings ================================================ //
// ======== Let's check currentTab and make appropriate API call =============== //
// ======== Use Axios Get to retrieve the baseball info ======================== //
if (this.currentTab === "MLB") {
this.loading = true;
config.params = {
team: "nyy,nym,bos,hou,lad,atl",
force: true
};
axios
.get(
`https://api.mysportsfeeds.com/v1.2/pull/mlb/2018-regular/scoreboard.json?fordate=${
date.yesterday
}`,
config
)
.then(response => {
this.vm_instance_data = response.data.scoreboard.gameScore;
})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
// End ==== get.then ====== //
myportsfeeds.js我只是想重构所有这些Axios调用:
module.exports = {
/* jshint ignore:start */
feedsData: async function(url) {
url = encodeURI(url); // Format the URI
return (await axios.get(url, config)).data.divisionteamstandings.division;
}
/* jshint ignore:end */
};
vue实例数据属性this.standings未从axios调用获取数据。然而,这个.vm\u实例\u数据运行良好。getStandings()中的console.log(this)显示Windows对象??我不知所措。如果我在mySportsFeeds.js中输入console.log,我就拥有从API返回的对象数组。但是当我在主选项卡下的Dev Tools Vue面板中查看时,standings是数组[0]。我真的需要一些指导。提前感谢。可能重复的
getStandings
函数与父getSportsData
方法的作用域不同。您可以使用箭头函数,其中此
与父函数相同。例如:letgetStandings=async()=>{…}
Yes我知道这是如何工作的。因为排名是在vue实例中声明的一部分,所以它应该从新的vue(0)中获取此上下文,它对这个.vm_实例_数据就是这样做的。但是这个排名显示的是窗口对象。就是这样。感谢您的指导。。。