Javascript 显示Facebook API计数的自定义组件

因此，我想使用Vue.js创建自定义组件来获取社交计数

自定义组件标记将为：

<fb-share src="http://google.com"></fb-share>

下面是代码

var FBShare=Vue.extend({
道具：['src']，
计算：{
计数：函数（）{
返回$.getJSON（'https://api.facebook.com/method/links.getStats?urls=“+this.src+”&format=json'）.done（函数（数据）{
console.log（数据[0]。单击\u计数）；
返回数据[0]。单击“计数”；
});
}
},
模板：“{src}}-{{count}”
});
Vue.组件（“fb-share”，FBShare）；
新Vue({
el:“#应用程序”
});
没关系，我找到了答案

我添加了vue资源并从中修改了代码

给你


var FBShare=Vue.extend({
道具：['src']，
数据：函数（）{
返回{props:{}；
},
就绪：函数（）{
这是。$http.get（'https://api.facebook.com/method/links.getStats?urls=“+this.src+”&format=json'，函数（数据）{
this.props=数据；
});
},
模板：“{{src}}-{props[0].share_count}”
});
Vue.组件（“fb-share”，FBShare）；
新Vue({
el:“#应用程序”
});
问题在于您返回计数的方式：

count: function() {
  // This first return is what is actually returned and that is
  // a jQuery object
  return $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
    console.log(data[0].click_count);

    // This return does not get returned
    // like you think it gets returned
    return data[0].click_count;
  });
}

以下是解决您遇到的问题的一种方法：


var FBShare=Vue.extend({
道具：['src']，
数据：函数（）{return{count:''}}，
就绪：函数（）{
这是loadCount（）；
},
方法：{
loadCount:function（）{
var_this=这个；
$.getJSON（'https://api.facebook.com/method/links.getStats?urls=“+this.src+”&format=json'）.done（函数（数据）{
console.log（数据[0]。单击\u计数）；
_this.count=数据[0]。单击\u count；
});
}
},
模板：“{src}}-{{count}”
});
Vue.组件（“fb-share”，FBShare）；
新Vue({
el:“#应用程序”
});


count: function() {
  // This first return is what is actually returned and that is
  // a jQuery object
  return $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
    console.log(data[0].click_count);

    // This return does not get returned
    // like you think it gets returned
    return data[0].click_count;
  });
}