Vue|[Vue warn]: Unknown custom element: <v-car> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

一、问题现象

 

 

 ===================================================================

 

 

 最近在练习vue项目时,遇到这样的一个问题,很是奇怪,编译是ok,点击也能弹窗,但还是会报错

vue源码

复制代码
<template>
    <div>
        <template>
            <v-tabs :value="0" background-color="primary">
              <v-tab @click="$router.push({name:'Case'})">用例管理</v-tab>
              <v-tab @click="$router.push({name:'Task'})">任务管理</v-tab>
              <v-tab @click="$router.push({name:'Jenkins'})">Jenkins管理</v-tab>
              <v-tab @click="$router.push({name:'Report'})">报告管理</v-tab>
            </v-tabs>
        </template>

<v-dialog v-model="addDialog" max-width="500px">
    <v-car>
        <v-card-title>添加测试用例</v-card-title>

        <v-card-text>
            <v-container>
                <v-text-field label="用例名称"></v-text-field>
                <v-select :items="selectItem" label="用例类型"></v-select>
                <v-textarea label="用例数据"></v-textarea>
            </v-container>
        </v-card-text>

        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="addDialog = false">取消</v-btn>
            <v-btn color="primary">确定</v-btn>
        </v-card-actions>

    </v-car>
</v-dialog>

<v-btn color="primary" class="btn" @click="addDialog = true">添加用例</v-btn>
<v-btn color="success" class="btn">生成任务</v-btn>
<template>
            <v-data-table
              v-model="selected"
              :headers="headers"
              :items="desserts"
              item-key="name"
              show-select
              class="elevation-1"
            >
            </v-data-table>
        </template>
</div>
</template>




<script>
    export default {
        data() {
            return {
                selectItem: ['文本', '文件'],
                addDialog: false,
                selected: [],
                headers: [{
                    text: 'id',
                    value: ''
                }, {
                    text: '用例名称',
                    value: ''
                }, {
                    text: '用例数据',
                    value: ''
                }, {
                    text: '操作',
                    value: ''
                }],
                desserts: [],
            };
        },


    };
</script>


<style scoped>
    .btn {
        margin: 10px;
    }
</style>
复制代码

 

二、解决方案

v-car修改成v-card

 

 三、修改后效果

 

 四、总结

组件名称少了一个单词,编译通过,功能似乎也ok,但是带来的影响是很大的,还是需要多补补vuetify基础知识

 

posted @   未来可期_Durant  阅读(872)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示