Не удается получить обратный вызов jsonp для работы внутри компонента Vue - PullRequest
Новая
       58

Не удается получить обратный вызов jsonp для работы внутри компонента Vue

0 голосов
/ 07 июля 2019

Я пытаюсь взять этот пример 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', но это не помогло.

1 Ответ

0 голосов
/ 08 июля 2019

Чтобы упростить его, просто передайте параметр nojsoncallback=1, и он вернет объект JSON напрямую.

...