Vue (2.6.14) -v-用于不使用api导入显示数据(axios)
提问于 2021-09-01 06:58:24
，思想，，我正试图构建一个显示，其中的活动是用一些过滤器显示的。数据来自CMS生成的API。这些过滤器没有显示在代码中，因为它不相关。
问题当手动定义数据属性中的“项”时，v-for列表呈现显示得很好，并给出了所需的输出。当从api中提取数据并将它们分配给项目时，v-for没有显示任何内容。
我的想法，，我认为v-for是在api请求完成之前运行的，将数据放入'items‘值中。目前，我使用'created‘属性来激发函数，之前也使用了'Mounted()’，这也不起作用。
版本 Vue 2.6.14，Axios 0.21.1
Vue码
var vue = new Vue({
el: '#app',
data: {
items: null,
},
created: function () {
this.fetchData()
},
methods: {
fetchData: function() {
axios
.get('/api/activities.json')
.then(response => (this.items = response.data.data))
}
}
})模板
<div id="app">
<ul class="example">
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-01 08:17:40
你的代码似乎运行得很好。如下所示，我刚刚用一个虚拟的REST api调用替换了您的api调用，它运行得很好。请将数据从response.data.data中释放出来，看看是否真的收到了一个数组。
Vue.config.productionTip = false
Vue.config.devtools = false
let vue = new Vue({
el: '#app',
data: {
items: null,
},
created() {
this.fetchData()
},
methods: {
fetchData: function() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => { this.items = response.data })}
}
})<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="app">
<ul class="example">
<li v-for="item in items">
{{ item.id }} - {{ item.name }}
</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69016221
复制
腾讯云开发者
