динамическое связывание изображений vue js - PullRequest
Новая
       9

динамическое связывание изображений vue js

0 голосов
/ 17 сентября 2018

Я пытаюсь привязать источник динамического изображения из WordPress API

http://wowitprojects.com/story/mobileapp/

<html>
<article class="media" v-for="item in posts">
<figure class="media-left">
                <p class="image is-64x64">
                    <img v-bind:src="getFeatureMedia(item.featured_media)">
                </p>
            </figure>
</article>
</html>
<script>
getFeatureMedia:function(id) {
        axios.get('http://wowitsolutions.com/wp-json/wp/v2/media/'+id)
        .then(result=>{
            console.log(result.data.source_url);
            return result.data.source_url;
        }, (eror)=>{
            alert(error)
        })
    },
</script>

Я получаю результат в консоли, но изображение src не обновляется с помощью этого метода.

1 Ответ

0 голосов
/ 17 сентября 2018

Использовать свойство данных 

var app = new Vue({
  el: '#app',
  data: {
    imgSrc: null
  },
  methods: {
    getFeatureMedia: function(id) {
      axios.get('http://wowitsolutions.com/wp-json/wp/v2/media/' + id)
        .then(result => {
          this.imgSrc = result.data.source_url;
        }, (eror) => {
          alert(error)
        })
    }
  },
  created() {
    this.getFeatureMedia(11027)
  }
})
img {
  width: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <img v-if="imgSrc" v-bind:src="imgSrc">
</div>
...