d***@dufan.cool
d***@dufan.cool
  • 发布:2024-03-12 14:46
  • 更新:2024-03-12 14:46
  • 阅读:246

【报Bug】组合式 api 循环输出自定义组件 有警告

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 11

HBuilderX类型: 正式

HBuilderX版本号: 3.99

浏览器平台: Chrome

浏览器版本: 122.0.6261.112

项目创建方式: HBuilderX

示例代码:
<template>  

    <view class="container">  
        <my-question @click="onAnswer(index)" class="my_question" v-for="(item,index) in questions"  
            :key="item._id" :ctitle="item.c_title" :etitle="item.e_title" :isanswer="item.isAnswer"  
            :index="index+1"></my-question>  
    </view>  
    <my-footer v-show="questions.length>0"></my-footer>  
</template>
<template>  
    <view class="question" @click="_onClick">  
        <view class="question_left">  
            <match-media :min-width="800">  
                <span class="question_index">{{index}} </span>  
            </match-media>  
            <view class="question_title">  
                <span class="e_title">{{etitle}}</span>  
                <span class="c_title">{{ctitle}}</span>  
            </view>  
        </view>  
        <span class="question_right">  
            <uni-icons v-if="isanswer" color="#00aa00" type="smallcircle-filled" size="18"></uni-icons>  
            <uni-icons v-else class="icon" type="circle" size="18"></uni-icons>  
        </span>  
    </view>  
</template>  

<script setup>  
    const emits = defineEmits(['click'])  
    defineProps({  
        index: {  
            type: Number,  
            default: 0  
        },  
        etitle: {  
            type: String,  
            default: '中文标题'  
        },  
        ctitle: {  
            type: String,  
            default: 'English Title'  
        },  
        isanswer: {  
            type: Boolean,  
            default: false  
        }  

    })  

    // 组件点击事件  
    const _onClick = (e) => {  
        // $emit('click',e)  
        emits('click')  
    }  
</script>

操作步骤:

循环加载自定义组件

预期结果:

正常输出循环内容,并没有警告。

实际结果:

能正宗输入结果,但有个警告
[Vue warn]: Hydration node mismatch:

  • Client vnode:uni-view
  • Server rendered DOM:[object Comment]
    at <View>
    at <MyQuestion>
    at <View>
    at <Home>
    at <AsyncComponentWrapper>
    at <PageBody>
    at <Page>
    at <Anonymous>
    at <KeepAlive>
    at <RouterView>
    at <Layout>
    at <App>
    14:42:12.143 [Vue warn]: Hydration children mismatch in <uni-view>: server rendered element contains fewer child nodes than client vdom.
    at <View>
    at <Home>
    at <AsyncComponentWrapper>
    at <PageBody>
    at <Page>
    at <Anonymous>
    at <KeepAlive>
    at <RouterView>
    at <Layout>
    at <App>
    14:42:12.164 [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.
    at <MyFooter>
    at <Home>
    at <AsyncComponentWrapper>
    at <PageBody>
    at <Page>
    at <Anonymous>
    at <KeepAlive>
    at <RouterView>
    at <Layout>
    at <App>

bug描述:

自定义组件在展示页面循环输入时会有一个警告(数据可以正常加载)(把循环数据改成一个数字,比如说10,就没有警告),之前用选项式 api 是可以正常运行的。

这个组件我在小程序端也用的,小程序端是正常的。

2024-03-12 14:46 负责人:无 分享
已邀请:

要回复问题请先登录注册