CODEWITHSUNDEEP
vue.jsvuejs2
Klaus Pedersen
Klaus Pedersen

Reputation: 90

Vue.js i cant display fetched data

Im fetching a feed with fetch, but somehow my vue app does not render it i have tried diffrent things but nothing seems to work for me.

<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);
});

If I call this.feed in chrome it displays the data but if I drill into app.data its empty.

Upvotes: 0

Views: 209

Answers (1)

Klaus Pedersen
Klaus Pedersen

Reputation: 90

The solution was to extract the call as a method

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;
    }
  } 
});

Upvotes: 1

Related Questions