数据显示在控制台中但不在vue模板中

Question

I am trying to fetch some data with VUE from API that I created using Laravel Resource. The array in data is populating and showing in console perfectly. But when I am trying to show the data in template under a v-for loop with v-bind, it is not showing anything. If I clear the cache in my browser, it is still not showing any data. But if I clear the cache in my browser while being on another page and then come back to the page where the vue template is using back button, the data is there till I refresh.

Here is the code in template:

<template>
    <div>
        <h2>Feeds</h2>
        <div class="card card-body" >
          <ul>
            <li v-for="feed in feeds" v-bind:key="feed.id">
                <h3>{{feed.title}}</h3>
                <p>{{feed.body}}</p>
            </li>
          </ul>
        </div>
    </div>    
</template>

And here is my script:

export default {
data(){
    return {
        feeds: []
    }
},
created(){
    this.fetchFeeds();
},
methods:{
    fetchFeeds(page_url){
        let vm = this;
        page_url= page_url ||'feeds/api'
        fetch(page_url)
        .then(res => res.json())
        .then(res =>{
            vm.feeds = res.data;
            console.log(vm.feeds);            
        })
        .catch(err => console.log(err));
    }
  }
}

Answer 1

It can be vue reactivity issue. Try using Object.assign as below

 fetchFeeds(page_url){
    let vm = this;
    page_url= page_url ||'feeds/api'
    fetch(page_url)
    .then(res => res.json())
    .then(res =>{

        vm.feeds =  Object.assign({}, res.data);
        console.log(vm.feeds);            
    })
    .catch(err => console.log(err));
}

}