我目前正在使用Axios构建的Web应用程序的“商店”页面上工作,以获取产品数据,然后将其显示在Vue模板中。所有后端都能正常工作,前端也能成功渲染,但是Vue在控制台中两次发出警告,指出:Error in callback for watcher "childItems": "TypeError: Cannot read property 'tag' of undefined"
为了解决这个问题,我尝试将用于迭代产品的v-for包装在v-if中,该参数由async getProducts函数设置为true,该函数发送获取请求以显示产品数据。我尝试过移动getter函数的位置,将其放置在Mounted中,beforeMount,创建,使用vue-async-computing,所有渲染都很好,但是都没有摆脱错误。
这是我的store.vue文件:
<template>
<div id="store">
<section>
<b-tabs>
<div class="container">
<div v-if="fetchComplete">
<b-tab-item v-for="(product, index) in products" :label="product.categories[0].title" :key="index">
<div class="card">
<div class="card-image">
<figure class="image">
<img :src="'http://localhost:1339'+ product.product_color_imgs[0].img[0].url" :alt="product.title">
</figure>
</div>
<div class="card-content">
<p class="title is-4">{{product.title}}</p>
</div>
</div>
</b-tab-item>
</div>
</div>
</b-tabs>
</section>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
products: [],
fetchComplete: false
}
},
async beforeCreate() {
await axios({
method:'get',
url:'http://localhost:1339/products'
}).then(res => {
this.products = res.data;
this.fetchComplete = true;
}).catch(err => {
console.log(err);
})
}
}
</script>
在此版本中,我使用了beforeCreate,但已使用其他生命周期功能对其进行了测试。我的猜测是,beforeCreate的promise在页面第一次呈现后返回。
注意:我是Vue.js的新手,所以我可能忽略了某些东西
先感谢您!
这是由于将<div>
标签放置在<b-tabs>
组件内部而导致的<b-tab-item>
。似乎<b-tabs>
不需要<b-tab-item>
在插槽根目录中放置除以外的任何元素。
尝试将div移动到该组件之外,例如:
<div class="container">
<div v-if="fetchComplete">
<b-tabs>
<b-tab-item v-for...>
...
</b-tab-item>
</b-tabs>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句