Question

我正在使用加密货币的应用程序，所以现在我有2个组件： 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();
}

}）

在网址'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"}}

但截至目前，只有最后一个组件填写了详细信息（name，price_usd，price_eur等），而不是前3个组件。

以下是加载页面的视频：https://gfycat.com/gifs/detail/BreakableSlimHammerkop - 您可以看到它应该传递给前三个组件的所有硬币。我做错了什么？

Answer 1

问题是因为您在self和getStats()方法中声明的getCoin()变量绑定到window对象，并且没有适当地确定每个方法的作用域。一个简单的解决方法是用self = this;替换每个var self = this;语句。

让我解释一下。

当您在不使用var，let或const关键字的情况下声明新变量时，该变量将添加到全局范围对象，在本例中为{{1对象。您可以在https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/找到有关此JavaScript行为的更多信息，或查看MDN上的var文档（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var）

Answer 2

您不应该直接重新分配数据值，因为Vue无法检测属性添加和重新呈现视图。您应该通过Vue.set或this.$set这样执行此操作：

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

只有最后一个组件才能获得详细信息

3 个答案: