等待组件数据加载

Question

我正在使用 VueJS 版本 2，当我点击里面的 link 时（比方说）componentA 我调用 componentB 是这样的：

<template>
    <div>
        hey this is pokemon {{pokemonName}} with ID {{pokemonID}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pokemonName: this.$route.params.name,
                pokemonID: this.$route.params.pokeid
            }
        },
        created: function(){
           console.log(pokemonID); // here is the error
           // here I need to do some operations with pokemonID
        }
}
</script>

点击 link 后，我正确地看到了文本 hey this is pokemon x with ID y 但是当我检查控制台时，我也看到了这个：ReferenceError: pokemonID is not defined.

如您所见，我尝试使用 created 生命周期挂钩，因为我需要在加载组件后立即对 pokemonID 变量进行操作。

我该如何解决这个问题？

Answer 1

你需要在这里使用适当的范围，你忘记使用 this，如下所示：

created: function(){
   console.log(this.pokemonID); // Now there should be no error
   // here I need to do some operations with pokemonID
}

你得到错误，因为在创建的函数中没有定义 pokemonID 变量，而在组件范围内有一个 pokemonID 变量，可以通过 this.pokemonID.

等待组件数据加载

waiting for component data to load

vue.js

vue-component