vue js在同一页面中重复使用组件两次

Question

我有一个带有 axios 调用的组件。我用一个道具声明了其中两个，这些道具将 uri 提供给 axios 调用

export default {
name: "CardData",

props :['uri','suffixe' ,'label'],

data : function (){
    return  {

        lab : this.label,
        suff: this.suffixe,
        data :0,
    }
},

methods :{
    init(){

        self = this;
        this.$http.get(this.$ApiUri+this.uri)

            .then(function (response) {
                self.loading = true;
                // handle success
                if (response.data){
                    if (response.data.nb){
                      console.log('we have nb :' + response.data.nb );
                      self.data = response.data.nb;
                    }

                    self.loading = false;
                }
            })
            .catch(function (error) {console.log(error);});
    },
},

mounted(){

     this.init();
},

我有一个容器两次调用这个组件

 <CardData uri="getNbNews" suffixe=" "  label="News" :key="100" ></CardData>
 <CardData uri="getNbSources" suffixe=" "  label="Sources" :key="101"></CardData>

我可以在 console.log 上看到 response.data.nb 的结果 但只有一个在前面更新...其他包含 0 我想不通

Answer 1

作为同一个组件，您需要使用关键属性来区分它们。

 <CardData key="news" uri="getNbNews" suffixe=" "  label="News" ></CardData>
 <CardData key="sources" uri="getNbSources" suffixe=" "  label="Sources"></CardData>

Answer 2

好吧..我错过了这个菜鸟的事情

self = this

到

const self = this 

加上@Cristiano Soleti :key param anwser 解决了这个问题。谢谢:)。