CODEWITHSUNDEEP
vue.jsvuetify.js
YoyoPit
YoyoPit

Reputation: 35

Vuejs stop propagation click

I've got a v-select inside a v-list-item-title. I need to stop click propagation on the v-list-item-title when I click on the v-select. I hardly try (like using v-on:click.stop but without success.

Here's the vuejs template :

<v-list v-show="showItems" dense class="transition-fast-in-fast-out">
    <v-list-group no-action sub-group :value="!isCopropriete">
        <template v-slot:activator>
            <v-list-item-title>
                <v-icon class="mr-2">mdi-account-multiple-plus</v-icon> GROUPEMENT INTERET
                <v-select
                    v-on:change="changeFoyerGroupementInteretSelected()"
                    v-on:click.stop
                    v-model="idGrcFoyerGroupementInteretSelected"
                    :items="mapFoyersGroupementInteret"
                    item-value="idFoyerGrc"
                    class="d-inline-flex mx-2"
                    style="width: 70px; font-size: 0.8125rem !important;"
                    height="29"
                    background-color="white"
                    dense
                    outlined
                    hide-details
                >
                    <template slot="selection" slot-scope="data">
                        {{ data.item.id}} / {{nbFoyersGroupementInteret}}
                    </template>
                    <template slot="item" slot-scope="data">
                        {{ data.item.id}} / {{nbFoyersGroupementInteret}}
                    </template>
                </v-select>
                ({{ foyerGroupementInteretSelected.nbPersonnesFiltered }}/{{ foyerGroupementInteretSelected.nbPersonnes }})
            </v-list-item-title>
        </template>
        <v-list-item v-for="(personne, indexPersonne) in getListePersonnesFiltered(foyerGroupementInteretSelected)" :key="indexPersonne" class="pl-8">
            <v-list-item-content class="py-0 my-0" @click="">
                <v-list-item-title>
                    <v-tooltip text top>
                        <template v-slot:activator="scope">
                            <v-btn :color="computePersonColorType(foyerGroupementInteretSelected.cdCategorieFoyer)" @click="displayModifierRole(personne, foyerGroupementInteretSelected.refExtFoyer)" x-small outlined v-on="scope.on">
                                {{ personne.codeRoleFoyer }}
                            </v-btn>
                        </template>
                        <span><v-icon x-small color="white">mdi-pencil</v-icon> Modifier le rôle de {{ personne.prenom }} {{ personne.nom }}</span>
                    </v-tooltip>
                    <v-btn text small @click="afficherClient(personne.idGrc)" class="text-capitalize">
                        {{ personne.prenom }} {{ personne.nom }} {{ getInfosAge(personne) }}<span v-if="isPM && personne.indicBeneficiaireEffectif "> - (BE)</span>
                    </v-btn>
                    <v-tooltip left v-if="isPM && personne.indicBeneficiaireEffectif">
                        <template v-slot:activator="scope">
                            <v-btn rounded size="xx-small" icon color="black" dark v-on="scope.on"><v-icon>mdi-information-outline</v-icon></v-btn>
                        </template>
                        <span>
                            <b>Le bénéficiaire effectif (BE)</b> est la personne physique <br />
                            contrôlant l’entreprise par différents moyens : <br />
                            - soit en détenant 25% des parts sociales <br />
                            ou des droits de votes au sein de l’entreprise ; <br />
                            - soit en ayant le contrôle sur les organes de gestion, <br />
                            d’administration ou de direction (Conseil d’Administration, Assemblée Générale, etc.).
                        </span>
                    </v-tooltip>
                </v-list-item-title>
            </v-list-item-content>
            <v-list-item-action class="my-0">
                <v-row no-gutters>
                    <v-btn v-if="isPM && showBEAddAction(personne)" class="mr-2 mt-1" outlined small color="primary" @click="openAjouterBeneficiairePopin(personne, foyerGroupementInteretSelected)">
                        <v-icon data-autom="bePersonneEnv_Btn" color="primary">mdi-plus</v-icon>BE
                    </v-btn>
                    <v-btn text small rounded icon @click="displayConfirmation(personne.idGrc, foyerGroupementInteretSelected.refExtFoyer, indexFoyer, indexPersonne)">
                        <v-icon data-autom="deletePersonneEnv_Btn" color="primary">mdi-delete-outline</v-icon>
                    </v-btn>
                </v-row>
            </v-list-item-action>
        </v-list-item>
    </v-list-group>
</v-list>

The result looks like this :

enter image description here

And when I click on the v-select, it also click on the v-list-item-title. I need to stop this action on the title when I click on the v-select.

EDIT : A working Solution for me is :

<v-select v-on:change="changeFoyerGroupementInteretSelected()"
    v-on:click.native.stop="changeFoyerGroupementInteretSelected()"
    v-model="idGrcFoyerGroupementInteretSelected"
    :items="mapFoyersGroupementInteret"
    item-value="idFoyerGrc"
    class="d-inline-flex mx-2"
    style="width: 70px; font-size: .8125rem !important;"
    height="29"
    background-color='white'
    dense outlined hide-details>

    <template slot="selection" slot-scope="data">
        {{ data.item.id}} / {{nbFoyersGroupementInteret}}
    </template>
    <template slot="item" slot-scope="data">
        {{ data.item.id}} / {{nbFoyersGroupementInteret}}
    </template>
</v-select>

Upvotes: 2

Views: 2843

Answers (1)

Simo BOUSHYL
Simo BOUSHYL

Reputation: 96

I think your click call must be like that : v-on:click.native.stop="yourFunctionName"

Upvotes: 1

Related Questions