Vuejs停止传播点击

Posted 2023-03-16

【中文标题】Vuejs停止传播点击

【英文标题】：Vuejs stop propagation click

【发布时间】：2021-03-25 02:42:54

【问题描述】：

我在 v-list-item-title 中有一个 v-select。当我点击 v-select 时，我需要停止 v-list-item-title 上的点击传播。我几乎没有尝试（比如使用v-on:click.stop，但没有成功。

这是 vuejs 模板：

<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;"
                    
                    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>

结果如下所示：

当我点击 v-select 时，它也会点击 v-list-item-title。单击 v-select 时，我需要在标题上停止此操作。

编辑： 对我来说可行的解决方案是：

<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;"
    
    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>

【问题讨论】：

在v-select 上设置v-on:click.stop 应该可以正常工作。见jsfiddle.net/wnj4mk2f。

是的，我试试这个，但它对我不起作用，所以我正在寻找另一种方法。

我想帮忙。你能分叉并编辑我的小提琴来重现你的问题吗？

您使用的 Vuetify 版本是什么？

事实是我看不出小提琴和我的代码有什么区别。我在 Vue.js v2.6.7

【参考方案1】：

我想你的点击调用一定是这样的：v-on:click.native.stop="yourFunctionName"

【讨论】：

感谢您和@user:2438933，我已经尝试了几种组合，而为我工作的是：v-on:change="changeFoyerGroupementInteretSelected()" v-on:click.native.stop="" v-on:click="changeFoyerGroupementInteretSelected()"

事实上v-on:change 和v-on:click.native.stop 的解决方案工作正常，只需在您的提案中添加()：v-on:change="changeFoyerGroupementInteretSelected()" v-on:click.native.stop="changeFoyerGroupementInteretSelected()"

很高兴听到您解决了问题，祝您好运。