Question

我正在通过访存来获取供稿，但是以某种方式我的Vue应用程序无法呈现它，我尝试了不同的操作，但似乎对我没有用。

<section id="vue-instagram" class="instagram">
  <div class="instagram__col"  v-for="item in feed">
    <div class="instagram__col__picturebox">
      <img v-if="item.media_url.indexOf('.mp4') == -1" v-bind:src="item.media_url"/>
      <video v-if="item.media_url.indexOf('.mp4') > 0" loop preload muted controls style="width:100%;">
        <source v-bind:src="item.media_url" />
      </video>
    </div>
    <div class="instagram__col__description">
      <div class="instagram__col__descroption--icon">
        <img src="images/insta.png"/>
      </div>
      <div class="instagram__col__descroption--text">
        {{item.caption.substring(0,90)}}...
        <div class="hashtags bold-text">
          {{item.caption.substring(item.caption.indexOf('#'), item.caption.length).split(' ').slice(0,5).join(' ')}}
        </div>
      </div>
    </div>
  </div>
</section>

var app = new Vue({
  el: '#vue-instagram',  
  data:() => ({
    loading: false,
    feed: [],
  }),
}, created: async () => {
  var response = await fetch("URL_TOSERVER", {
    method: "POST",
  });
  var {data} = await response.json();
  this.feed = data; 
  console.log(data);
});

如果我在Chrome中调用this.feed，则会显示数据，但如果我钻入app.data，则其空白。

Answer 1

解决方案是将调用提取为方法

new Vue({
  el: '#vue-instagram',  
  data: {   
    loading: false,
    feed: [], 
  },
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function(){
      var self = this;  
      fetch("http://727.dk.web81.curanetserver.dk/umbraco/api/instagram/index", {
        method:"POST"
      }).then(function(response){
        return response.json();
      }).then(function(data){
        self.feed = data.data; 
      });
    }
  },
  computed: {
    posts: function() {
      return this.feed;
    }
  } 
});

Vue.js我无法显示获取的数据

1 个答案: