How to catch and click on the v-list-tile in Vuetify v-list and open the menu when the icon is clicked?

Question

JavaScript

The component renders a list similar to Icons with 2 lines and action:

Clicking on the small icon opens a menu. It is not possible to add click processing on the entire tile. As soon as I add a tile click handler , the menu stops working - a click on the icon works like a click on the entire tile.v-on:click.stop="goDetails(user.id)"

markup

<v-list two-line>

    <v-list-tile
      avatar
      v-for="user in users"
      v-bind:key="user.id"
      v-on:click.stop="goDetails(user.id)"
    >
    
      <v-list-tile-avatar>
        <img :src="user.avatar">
      </v-list-tile-avatar>

      <v-list-tile-content>
        <v-list-tile-title>{{ user.name }}</v-list-tile-title>
        <v-list-tile-sub-title v-html="user.group"></v-list-tile-sub-title>
      </v-list-tile-content>

      <v-list-tile-action>

        <v-menu offset-y>
          <v-btn slot="activator" icon ripple>
            <v-icon color="grey">more_vert</v-icon>
          </v-btn>
          <v-list>
            <v-list-tile>
              <v-list-tile-title v-on:click.stop="settings(user.id)">Настройки</v-list-tile-title>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-title v-on:click.stop="deleteAccount(user.id)">Удалить</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>

      </v-list-tile-action>
    </v-list-tile>

</v-list>

Upd. Added Fiddle . Icon click should not triggergoDetails()

Answer 1

remove v-on:click.stop - stop
UPD: add @click.stop to v-list-tile-action and leave v-list-tile just v-on:click="goDetails(user.id)"
https: //jsfiddle.net/z9mf503r/