Question

我正在尝试从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>

我在控制台中得到结果，但是image src没有使用此方法更新。

Answer 1

使用数据属性

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>

动态图像绑定Vue js

1 个答案: