我正在使用带有加密货币的应用程序，所以现在我有2个组件：
我的硬币：
Vue.component('mycoins',{
data() {
return {
coins: [],
}
},
template: `
<ul class="coins">
<coin v-for="(coin, key) in coins" :coin="coin.coin_name" :key="coin.coin_name"></coin>
</ul>
`,
methods: {
getStats() {
self = this;
axios.get('api/user/coins').then(function (response) {
console.log(response.data.coins);
self.coins = response.data.coins;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted() {
this.getStats();
}
}）
在URL'api / user / coins'上，我得到以下数据：
{"coins":
[{"id":1,"coin_name":"ethereum","user_id":1,"buy_price_usd":"341.44000","buy_price_btc":"0.14400","created_at":"2017-09-25 20:40:20","updated_at":"2017-09-25 20:40:20"},
{"id":2,"coin_name":"bitcoin","user_id":1,"buy_price_usd":"12.00000","buy_price_btc":"14.00000","created_at":"2017-09-25 21:29:18","updated_at":"2017-09-25 21:29:18"},
{"id":3,"coin_name":"ethereum-classic","user_id":1,"buy_price_usd":"33.45000","buy_price_btc":"3.00000","created_at":"2017-09-25 21:49:50","updated_at":"2017-09-25 21:49:50"},{"id":4,"coin_name":"lisk","user_id":1,"buy_price_usd":"23.33000","buy_price_btc":"0.50000","created_at":"2017-09-25 21:51:26","updated_at":"2017-09-25 21:51:26"}]}
然后，我有这个组件：硬币：
Vue.component('coin',{
data() {
return {
thisCoin: this.coin,
coinData: {
name: "",
slug: "",
image: "https://files.coinmarketcap.com/static/img/coins/32x32/.png",
symbol: "",
price_eur: "",
price_usd: "",
}
}
},
props: ['coin'],
template: `
<li class="coin">
<div class="row">
<div class="col col-lg-2 branding">
<img :src="this.coinData.image">
<small>{{this.coinData.name}}</small>
</div>
<div class="col col-lg-8 holdings">
<p>11.34 <span>{{this.coinData.symbol}}</span></p>
<p>$ {{this.coinData.price_usd * 3}}</p>
</div>
<div class="col col-lg-2 price">
<p>{{this.coinData.price_usd}}</p>
</div>
<div class="edit col-lg-2">
<ul>
<li>
<p>Edit</p>
</li>
<li>
<p>Delete</p>
</li>
</ul>
</div>
</div>
</li>
`,
methods: {
getCoin: function(name) {
self = this;
axios.get('api/coin/' + name).then(function (response) {
console.log(response);
self.coinData.name = response.data.coin.name;
self.coinData.price_usd = response.data.coin.price_usd;
self.coinData.price_eur = response.data.coin.pride_eur;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted() {
this.getCoin(this.coin);
}
}）
在网址“ api / coin / {name}”上，我得到了以下数据：
{"coin":{"slug":"lisk","name":"Lisk","symbol":"LSK","rank":14,"price_usd":"6.15510","price_btc":"0.00156","24h_volume_usd":null,"market_cap_usd":"99999.99999","available_supply":"99999.99999","total_supply":"99999.99999","percent_change_1h":"0.10000","percent_change_24h":"6.78000","percent_change_7d":"-5.64000","last_updated":1506385152,"price_eur":"5.19166","24h_volume_eur":null,"market_cap_eur":"99999.99999","created_at":"2017-09-25 00:06:27","updated_at":"2017-09-26 00:23:02"}}
但是截至目前，只有最后一个组件填充了详细信息（名称，price_usd，price_eur等），但没有填充前三个组件。
这是加载页面的视频：https://gfycat.com/gifs/detail/BreakableSlimHammerkop-您可以看到它经过了应该传递给前三个组件的所有硬币。我究竟做错了什么？
最佳答案
问题是因为您在self和getStats()方法中声明的getCoin()变量绑定到window对象，并且没有适当地限制在每个方法的范围内。一个简单的解决方法是将每个self = this;语句替换为var self = this;。
让我解释。
在不使用var，let或const关键字声明新变量时，该变量将添加到全局作用域对象（在本例中为window对象）。您可以在https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/上找到有关此JavaScript行为的更多信息，或在MDN（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var）上查看var docs