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

Custom components showing counts from Facebook API

本文关键字：自定义 组件 Facebook API 显示      更新时间：2023-09-26

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

自定义组件标签为：

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

其中属性CCD_ 1将是将被计数的链接的url。该组件的输出为：

<span>265614</span>

这是的代码

var FBShare = Vue.extend({
  props: ['src'],
  computed: {
    count: function() {
      return $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
        console.log(data[0].click_count);
        return data[0].click_count;
      });
    }
  },
  template: '<span>{{ src }} - {{ count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
  <fb-share src="http://google.com"></fb-share>
</div>

所以，问题是它总是显示[Object-Object]。

谢谢

问题在于返回计数的方式：

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({
    props: ['src'],
    data: function() { return { count: '' } },
    ready: function() {
        this.loadCount();
    },
    methods: {
        loadCount: function() {
            var _this = this;
            $.getJSON('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json').done(function(data) {
                console.log(data[0].click_count);
                _this.count = data[0].click_count;
            });
        }
    },
    template: '<span>{{ src }} - {{ count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
    el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
  <fb-share src="http://google.com"></fb-share>
</div>

没关系，我找到了答案。

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

给你。

var FBShare = Vue.extend({
  props: ['src'],
  data: function(){
    return { props: {} };
  },
  ready: function(){
this.$http.get('https://api.facebook.com/method/links.getStats?urls=' + this.src + '&format=json', function(data){
      this.props = data;
    });
  },
  template: '<span>{{ src }} - {{ props[0].share_count }}</span>'
});
Vue.component('fb-share', FBShare);
new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="app">
  <fb-share src="http://google.com"></fb-share>
  <fb-share src="http://kawaiibeautyjapan.com"></fb-share>
</div>

相关文章：