[Vue警告]:监视程序“ childItems”的回调错误:“ TypeError:无法读取未定义的属性'tag'

布莱恩·伯格(Bryan Bergo)

我目前正在使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档