只有最後一個組件獲取細節充滿

Question

我的工作與cryptocurrencies一個應用程序，所以現在我有兩個部分組成： MyCoins：

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 /用戶/硬幣我得到這樣的數據：

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

}）

在URL 'API /硬幣/ {名}' 我得到這樣的數據：

{"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等），但不是前3個。

這裏是加載頁面的視頻：https://gfycat.com/gifs/detail/BreakableSlimHammerkop - 你可以看到它通過它應該通過前三個組件的所有硬幣。我究竟做錯了什麼？

Answer 1

的問題是，因爲你已經在聲明的變量self您的getStats()和getCoin()方法綁定到window對象，並且沒有正確限定到每個方法。一個簡單的解決方法是用var self = this;替換每個self = this;聲明。

讓我解釋一下。

在聲明不使用var，let或const關鍵字的新變量，該變量被添加到全球範圍內的對象，在這種情況下是window對象。您可以在這裏找到關於此JavaScript行爲的更多信息https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/或檢查MDN上的var文檔（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var）

Answer 2

您不應該直接重新分配數據值，因爲Vue無法檢測屬性添加和重新顯示視圖。

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

Answer 3

試試這個：

Vue.component('coin', { 
    data() { 
     return { 
      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="coinData.image"> 
        <small>{{ coinData.name }}</small> 
       </div> 
       <div class="col col-lg-8 holdings"> 
        <p>11.34 <span>{{ coinData.symbol }}</span></p> 
        <p>$ {{ coinData.price_usd * 3 }}</p> 
       </div> 
       <div class="col col-lg-2 price"> 
        <p>{{ 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() { 
      axios.get('api/coin/' + this.coin).then((response) => { 
       console.log(response); 
       this.$set(this.coinData, 'name', response.data.coin.name); 
       this.$set(this.coinData, 'price_usd', response.data.coin.price_usd); 
       this.$set(this.coinData, 'price_eur', response.data.coin.pride_eur); 
      }).catch(function (error) { 
       console.log(error); 
      }); 
     } 
    }, 
    mounted() { 
     this.getCoin(); 
    } 
}); 

瞭解更多：你應該通過Vue.set或this.$set這樣做 Vue.$sethttps://vuejs.org/v2/guide/list.html#Caveats