无法让 jsonp 回调在 Vue 组件内工作

Question

我正在尝试将此 Flickr jsonp Vue 示例 (https://codepen.io/tomascherry/pen/GrgbzQ) 转换为一个组件。但是，我无法弄清楚如何让 jsonFlickrFeed() 映射到 this.jsonFlickrFeed()（一旦该函数放置在组件的 methods: {} 中）。

代码如下：

<template>
  <!-- HTML HERE -->
</template>

<script>
let callApiTimeout = null

export default {
  name: 'Flickr',
  filters: {
    splitTags: function(value) {
      // showing only first 5 tags
      return value.split(' ').slice(0, 5)
    }
  },
  directives: {
    /* VueJs utilites */
    img: {
      inserted: function(el, binding) {
        this.lazyload(el, binding)
      },
      update: function(el, binding) {
        this.lazyload(el, binding)
      }
    }
  },
  data() {
    return {
      images: [],
      query: ''
    }
  },
  watch: {
    query: function(value) {
      clearTimeout(callApiTimeout)
      callApiTimeout = setTimeout(
        function() {
          const reqURL =
            'https://api.flickr.com/services/feeds/photos_public.gne'
          const options = {
            params: {
              format: 'json',
              tags: this.query,
              jsoncallback: 'this.jsonFlickrFeed'
            }
          }
          this.$http.jsonp(reqURL, options)
        }.bind(this),
        250
      )
    }
  },
  methods: {
    /* JSONP callback function */
    jsonFlickrFeed(response) {
      this.$data.images = response.items
    },
    /* General utility functions */
    lazyload(el, binding) {
      const img = new Image()
      img.src = binding.value

      img.onload = function() {
        el.src = binding.value
      }
    }
  }
}
</script>

<style lang="less">
  /* STYLE HERE */
</style>

我尝试添加 jsoncallback: 'this.jsonFlickrFeed' 参数，但这没有帮助。

Answer 1

为了简单起见，只需要传递参数nojsoncallback=1，它就会return直接JSON对象。

无法让 jsonp 回调在 Vue 组件内工作

Can't get jsonp callback to work inside a Vue component

jsonp

flickr

vue.js