Javascript 只有最后一个组件才能填写详细信息

我正在开发一款使用加密货币的应用程序，因此现在我有两个组件： 霉素：

然后我有一个组件：硬币：

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);
}

但到目前为止，只有最后一个组件填写了详细信息（名称、美元价格、欧元价格等），而不是前3个组件

---

这里是加载页面的视频：-你可以看到它通过所有的硬币，它应该传递给前三个组件。我做错了什么？

您不应该直接重新分配数据值，因为Vue无法检测属性添加和重新渲染视图。您应该通过

Vue.set

或

this.$set

这样做：

self.$set(self.coinData, 'name', response.data.coin.name)
...

---

您不应该直接重新分配数据值，因为Vue无法检测属性添加和重新渲染视图。您应该通过

Vue.set

或

this.$set

这样做：

self.$set(self.coinData, 'name', response.data.coin.name)
...

---

问题是因为在

getStats（）

和

getCoin（）

方法中声明的

self

变量绑定到

窗口

对象，并且没有正确地限定到每个方法的范围。一个简单的修复方法是替换每个

self=this语句，带有
var self=this

让我解释一下

当您在不使用
var
、
let
或
const
关键字的情况下声明新变量时，该变量将添加到全局范围对象，在本例中，该对象是
窗口
对象。您可以在这里找到有关此JavaScript行为的更多信息，或者查看MDN（）上的var文档。
问题是因为您在
getStats（）
和
getCoin（）
方法中声明的
self
变量绑定到
窗口
对象，并且没有正确地限定到每个方法的范围。一个简单的修复方法是替换每个
self=this语句，带有
var self=this

让我解释一下

当您在不使用
var
、
let
或
const
关键字的情况下声明新变量时，该变量将添加到全局范围对象，在本例中，该对象是
窗口
对象。您可以在这里找到有关此JavaScript行为的更多信息，或者查看MDN（）上的var文档。
在我看来，组件正常，api测试正常吗？您的
self
变量是否可能在所有组件中共享？我没有看到
var
或
let
所以。。。或者，您可以使用箭头函数避免自洗牌：
axios.get（…）.then（response=>{this.coinData.name=response.data.coin.name；…}
在我看来，组件是正常的，api测试是否正常？是否有可能在所有组件之间共享
self
变量？我没有看到
var
或
let
所以…或者，您可以使用箭头函数避免自乱序：
axios.get（…）。然后（response=>{this.coinData.name=response.data.coin.name；…}
谢谢！我在以前的一个项目中使用了var self=this；但完全忘记了var，谢谢！谢谢！我在以前的一个项目中使用了var self=this；但完全忘记了var，谢谢！
{"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"}}

self.$set(self.coinData, 'name', response.data.coin.name)
...