Erst letzte von Komponenten erhalten gefüllt Details

Question

ich auf einer App mit cryptocurrencies arbeite, so jetzt habe ich 2 Komponenten: 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(); 
} 

})

Auf url ‚api/user/Münzen ich erhalte diese Daten:

{"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"}]} 

Dann habe ich diese Komponente: Münze:

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

})

Auf url 'api/Münze/{Name}' ich diese Daten erhalten:

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

Aber ab jetzt, nur die letzte Komponente wird die gefüllten Daten (Name, price_usd , price_eur, etc.), aber nicht die ersten 3.

Hier ist das Video zum Laden der Seite: https://gfycat.com/gifs/detail/BreakableSlimHammerkop - Sie können sehen, es geht durch alle Münzen, die es an die ersten drei Komponenten übergeben sollte. Was mache ich falsch?

Answer 1

Das Problem ist, weil die self Variablen, die Sie in deklariert haben Ihre Methoden getStats() und getCoin() sind an das Objekt window gebunden und nicht für jede Methode geeignet. Eine einfache Lösung wäre, jede self = this; Anweisung durch var self = this; zu ersetzen.

Lassen Sie mich erklären.

Wenn Sie eine neue Variable deklarieren, ohne die var, let oder const Schlüsselwörter, wird die Variable auf den globalen Bereich Objekt hinzugefügt, die in diesem Fall ist das window Objekt. Sie können mehr Informationen über dieses JavaScript-Verhalten finden Sie hier https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ oder überprüfen Sie die Var-Dokumente auf MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)

Answer 2

Sie sollten den Datenwert nicht direkt neu zuweisen, da Vue keine Eigenschaften hinzufügen und die Ansicht neu rendern kann. Sie sollten es über Vue.set oder this.$set wie folgt tun:

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

Answer 3

Versuchen Sie folgendes:

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

Lesen Sie mehr: Vue.$sethttps://vuejs.org/v2/guide/list.html#Caveats