[Vue 警告]：观察者“childItems”的回调错误：“TypeError：无法读取未定义的属性‘标签’”

Posted 2023-02-22

【中文标题】[Vue 警告]：观察者“childItems”的回调错误：“TypeError：无法读取未定义的属性‘标签’”

【英文标题】：[Vue warn]: Error in callback for watcher "childItems": "TypeError: Cannot read property 'tag' of undefined"

【发布时间】：2021-04-29 21:56:36

【问题描述】：

我目前正在使用 Axios 构建的 Web 应用的 Store 页面来获取产品数据，然后将其显示在 vue 模板中。所有后端工作正常，前端也成功渲染，但是 Vue 在控制台中两次发出警告，说明： Error in callback for watcher "childItems": "TypeError: Cannot read property 'tag' of undefined"

为了解决这个问题，我尝试将用于迭代产品的 v-for 包装在一个 v-if 中，该 v-if 由异步 getProducts 函数设置为 true，该函数发送一个获取产品数据的请求以显示。我尝试在 getter 函数所在的位置移动，将其放置在 Mounted、beforeMount、created、使用 vue-async-computed 中，所有渲染都很好，但没有一个能摆脱错误。

这是我的 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" :>
                                </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 的承诺在页面第一次呈现后返回。

注意：我对 Vue.js 比较陌生，所以我可能忽略了一些东西

提前谢谢你！

【参考方案1】：

这是由于将<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>