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

Question

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

自定义组件标签将是：

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

其中属性 src 将是 link 的 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]。

谢谢

Answer 1

没关系，我找到了答案。

我添加了 vue-resource 并修改了它的代码。

在这里。

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>

Answer 2

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

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>

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

Custom components showing counts from Facebook API

javascript

facebook

vue.js