Question

我正在尝试使用我使用Laravel Resource创建的API通过VUE提取一些数据。数据数组正在完美填充并显示在控制台中。但是，当我尝试使用v-bind在v-for循环下显示模板中的数据时，它没有显示任何内容。如果清除浏览器中的缓存，它仍然不会显示任何数据。但是，如果我在另一页上的同时清除浏览器中的缓存，然后返回到使用vue模板的“后退”按钮的页面，则数据一直存在，直到刷新为止。

这是模板中的代码：

<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>

这是我的脚本：

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

可能是vue反应性问题。尝试使用 Object.assign 如下

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

}

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

1 个答案: