v-list-item-subtitle在主播中没有收到点击事件

Question

我正在尝试从Vuetify获取列表项目副标题元素上的单击事件，但单击事件不起作用。我还尝试添加一个查询选择器侦听器，但不起作用。

`<v-list-item  v-for="(item, i) in widgets" :key="i">
     <v-list-item-title class="list-title">
         <v-divider></v-divider>
             <v-list-item-subtitle @click="addData()" class="ma-3">
                 {{item.title}}
             </v-list-item-subtitle>
     </v-list-item-t`enter code here`itle>
</v-list-item>`

编辑:添加导航栏的完整代码块我正尝试在click事件不起作用的地方创建

​

<script>
    import { fabric } from 'fabric';
    import ToolbarGroup from "./ToolbarGroup";
    export default {
        name: "Sidebar",
        props: {
            canvas: { required: true },
        },
        components: {
            ToolbarGroup,
            fabric
        },
        data:() => (

            {
                itemTitle : '',
                dateUpdate : 'Current Date',
                activeIndex: null,
                templates: [
                    { title: 'Category 1' },
                    { title: 'Category 2' },
                    { title: 'Category 3' },
                    { title: 'Category 4' },
                    { title: 'Category 5' },
                    { title: 'Category 6' },
                    { title: 'Category 7' },
                    { title: 'Category 8' }],
                widgets: [
                    { title: 'Current Time' },
                    { title: 'Current Date' },
                    { title: 'Scrolling Marquee' },
                    { title: ' Weather' },
                    { title: ' Stock Ticker' },
                    { title: ' Calendar List' },
                    { title: 'Countdown' },
                ],
                imagelink: [
                    { title: 'Template', icon: require('~/assets/img/templates.svg'), image:require('~/assets/img/white_template.svg')},
                    { title: 'Shapes', icon: require('~/assets/img/shapes.svg'), image:require('~/assets/img/white_shapes.svg')},
                    { title: 'Images', icon: require('~/assets/img/images.svg'), image:require('~/assets/img/white_images.svg')},
                    { title: 'Videos', icon: require('~/assets/img/videos.svg'), image:require('~/assets/img/white_videos.svg')},
                    { title: 'Apps', icon: require('~/assets/img/apps.svg'), image:require('~/assets/img/white_apps.svg')}
                ],
                items1: [
                    { title: 'duo', icon: 'duo' },
                    { title: 'Photos', icon: 'image' },
                    { title: 'About', icon: 'textsms' },
                    { title: 'About', icon: 'mode_comment' },
                    { title: 'Delete', icon: 'delete' },
                    { title: 'Star', icon: 'star' },
                ],
                items: [
                    {
                        icon: 'image',
                        text: 'images',
                    },
                    {
                        icon: 'star',
                        text: 'Star',
                    },
                    {
                        icon: 'send',
                        text: 'Send',
                    },
                    {
                        icon: 'email-open',
                        text: 'Drafts',
                    },
                ],
                mini: true,
                model: 1,
                mode1: 2,
                right: null,
                drawer: false,
                widthIncrease: 70,
                currentList: '',
                shapeSelected:false,
                imagesSelected:false,
                videoSelected:false,
                appSelected:false,

            }),
        mounted() {
            document.addEventListener("click", this.handleClickOutside);
        },

        methods:{
            checkActive(idx, activeIndx) {
                return (idx === activeIndx && this.widthIncrease === 350)? true: false;
            },
            handleClickOutside(event) {
                if (document.querySelector(".left-navigation").contains(event.target)) {
                    this.drawer = true;
                }
                else {
                    this.drawer = false;
                    this.widthIncrease = 70;
                }
            },
            toggle(index) {
                this.activeIndex = index
            },
            addData() {
                console.log("Show date method click")
            },


            showList(data) {
                this.currentList = data;
                if (data === 'Template')
                {
                    if(this.drawer === false)
                    {
                        this.drawer = true;
                        this.widthIncrease = 350;
                        this.shapeSelected = false;
                        this.imagesSelected = false;
                        this.videoSelected = false;
                        this.appSelected = false;
                    }
                    else {
                        this.drawer = false;
                        this.widthIncrease = 70;
                    }

                }
                else if (data === 'Shapes')
                {
                    this.widthIncrease = 70;
                    if(this.shapeSelected === false)
                    {
                        this.shapeSelected = true;
                        this.widthIncrease = 350;
                        this.drawer = false;
                        this.imagesSelected = false;
                        this.videoSelected = false;
                        this.appSelected = false;
                    }
                    else {
                        this.shapeSelected = false;
                        this.widthIncrease = 70;
                    }
                }
                else if(data === 'Images')
                {
                    if (this.imagesSelected === false)
                    {
                        this.imagesSelected = true;
                        this.drawer = false;
                        this.shapeSelected = false;
                        this.videoSelected = false;
                        this.appSelected = false;
                        this.widthIncrease = 350;
                    }
                    else {
                        this.imagesSelected = false;
                        this.widthIncrease = 70
                    }
                }
                else if(data === 'Videos')
                {
                    if(this.videoSelected === false)
                    {
                        this.videoSelected = true;
                        this.drawer = false;
                        this.shapeSelected = false;
                        this.imagesSelected = false;
                        this.appSelected = false;
                        this.widthIncrease = 350;
                    }
                    else {
                        this.videoSelected = false;
                        this.widthIncrease = 70;
                    }

                }
                else if(data === 'Apps') {
                    if(this.appSelected === false) {
                        this.appSelected = true;
                        this.drawer = false;
                        this.shapeSelected = false;
                        this.imagesSelected = false;
                        this.videoSelected = false;
                        this.widthIncrease = 350;
                    }
                    else {
                        this.appSelected = false;
                        this.widthIncrease = 70;
                    }
                }

            },
        }


    }

</script>

<style lang="stylus" scoped>
    .imageIcon {
        width: 23px !important;
    }
    img:hover {
        fill: red;
    }
    .mx-left {
        left : 0
        top : 0%
    }
    .list-title {
        display :block
        text-align:center
        color:#7c7f83
        font-size:10px
        height:40px
    }
    .v-list__tile theme--light {
        display: block
        text-align :center
    }
    .avatar {
        background-color:white
        margin:10px
    }
    .v-navigation-drawer >.v-list__item.v-list__item {
        padding:0px !important
    }
    .active {
        background-color: #70cd38;
    }
    p {
        left:0 !important
        padding:0 !important
    }
    .v-list-item {
        padding:0 !important
    }
    .left-navigation {
        position:absolute;
        z-index: 1;
        transition: width 1s ease !important;
    }
    .template-app-list {
        padding-left:20%;
        top: 0;
        left: 55px;
        background-color:#ffffff;
    }
    .shape-image-video-items {
        padding: 0 5% 0 25%;
        top: 0;
        left: 55px;
        background-color:#ffffff;
    }
    .v-avatar img, .v-avatar .v-icon, .v-avatar .v-image {
        border-radius: 0%
    }
    .sidebar-item-title {
        display: block;
        text-align :center;
        color:#70cd38;
    }
    .sidebar-item-subtitle {
        font-size: 11px;
        color: #7c7f83;
    }
    .isActive {
        color: white;
    }
    .v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child) {
        margin-left: 0px;
    }
</style>

<template>
    <v-navigation-drawer color="#ffffff" :style="{ width: widthIncrease + 'px' }" class="left-navigation" app disabled>
        <v-list class="fill-height" no-gutters disabled v-model="showList" absolute temporary>
            <v-navigation-drawer class="navigation-drawer-class" light-4 mini-variant mini-variant-width="70" style="align-items:center;" permanent app disabled>
                <v-list-item v-for="(item, image) in imagelink" :key="image">
                    <v-avatar class="ma-2" :class="{'active': checkActive(item.title, currentList)}" :src='item.icon'>
                        <img v-if="checkActive(item.title, currentList)==true" class="imageIcon"
                             @click.stop="showList(item.title)" :src='item.image'/>
                        <img v-else class="imageIcon" @click.stop="showList(item.title)" :src='item.icon'/>
                    </v-avatar>
                </v-list-item>
            </v-navigation-drawer>

            <v-list v-if="currentList=== 'Template'" class="template-app-list">
                <v-list-item>
                    <v-list-item-title>
                        <span class="sidebar-item-title">Template</span>
                    </v-list-item-title>
                </v-list-item>
                <v-list-item v-for="(item, i) in templates" :key="i">
                    <v-list-item-title class="list-title">
                        <v-divider></v-divider>
                        <p class="ma-3">{{item.title }}</p>
                    </v-list-item-title>
                    <v-divider></v-divider>
                </v-list-item>
                <v-divider></v-divider>
            </v-list>
            <v-list v-if="currentList === 'Shapes'" class="shape-image-video-items">
                <v-list-item class="px-4 py-0">
                    <v-list-item-title>
                        <span class="sidebar-item-title">Shapes</span>
                    </v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <v-list-item-content>
                            <span size=20 class="sidebar-item-subtitle">
                            My Shapes
                            </span>
                    </v-list-item-content>
                    <v-spacer> </v-spacer>
                    <v-icon size=20>add</v-icon>
                    <v-icon size=20>delete</v-icon>
                </v-list-item>
                <v-list-item><v-icon size=28>star_border</v-icon></v-list-item>
                <v-list-item>
                    <v-list-item-content>
                            <span class="sidebar-item-subtitle">Shape Library
                                <v-icon size=20>keyboard_arrow_down</v-icon>
                            </span>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item-icon v-for="(item, i) in items1" :key="i" >
                    <v-icon class="py-3 pr-3 pl-0" size=28>{{item.icon}}</v-icon>
                </v-list-item-icon>
            </v-list>
            <v-list v-if="currentList=== 'Images'" class="shape-image-video-items">
                <v-list-item>
                    <v-list-item-title>
                        <span class="sidebar-item-title">Images</span>
                    </v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <v-list-item-content>
                            <span class="sidebar-item-subtitle">
                                My Images
                                <v-icon size=20>keyboard_arrow_up</v-icon>
                            </span>
                    </v-list-item-content>
                    <v-spacer></v-spacer>

                    <v-icon size=20>add</v-icon>
                    <v-icon size=20>delete</v-icon>
                </v-list-item>
                <v-list-item-icon  v-for="(item, i) in items" :key="i" >
                    <v-icon class="py-3 pr-3 pl-0" size=28> {{item.icon}}</v-icon>
                </v-list-item-icon>
                <v-list-item>
                    <v-list-item-content>
                            <span class="sidebar-item-subtitle">
                                    Preset Images Library
                                <v-icon size=20>keyboard_arrow_down</v-icon>
                            </span>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
            <v-list v-if="currentList=== 'Videos'" class="shape-image-video-items">
                <v-list-item >
                    <v-list-item-title>
                        <span class="sidebar-item-title">Videos</span>
                    </v-list-item-title>
                </v-list-item>

                <v-list-item>
                    <v-list-item-content>
                            <span class="sidebar-item-subtitle">
                                My Videos
                                <v-icon size=20>keyboard_arrow_up</v-icon>
                            </span>
                    </v-list-item-content>
                    <v-spacer></v-spacer>
                    <v-icon size=20>add</v-icon>
                    <v-icon size=20>delete</v-icon>
                </v-list-item>

                <v-list-item-icon v-for="(item, i) in items1" :key="i">
                    <v-icon class="py-3 pr-3 pl-0" size=28>{{item.icon}}</v-icon>
                </v-list-item-icon>

            </v-list>

            <v-list v-if="currentList=== 'Apps'" class="template-app-list" >
                <v-list-item @click="showDate()">
                    <v-list-item-title>
                        <span class="sidebar-item-title">Widgets</span>
                    </v-list-item-title>
                </v-list-item>

                <v-list-item  v-for="(item, i) in widgets" :key="i">
                    <v-list-item-title class="list-title" >
                        <v-divider></v-divider>
                        <v-list-item-subtitle @click="addData()" class="ma-3">{{item.title}}</v-list-item-subtitle>
                    </v-list-item-title>

                </v-list-item>
                <v-divider></v-divider>
            </v-list>
        </v-list>
    </v-navigation-drawer>
</template>

​

如果我的代码中有什么东西，请让我知道。

Answer 1

经过对代码的持续研究，我得到了解决方案，我使用嵌套的v-list的方式并不正确。删除v-list click事件后，该事件工作正常。

"“