Как во Vuetify v-list ловить и клик по v-list-tile и открывать меню при клике по иконке?

Question

[Сергей Соколов]

В компоненте выводится список, похожий на пример Icons with 2 lines and action:



Клик по маленькой иконке открывает меню. Не получается добавить обработку клика по всему tile. Как только добавляю обработу клика по tile v-on:click.stop="goDetails(user.id)", перестаёт работать меню – клик по иконке срабатывает как клик по всему tile'у.

Разметка

<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. Добавил Fiddle. Клик по иконке не должен вызывать срабатывание goDetails()

Comments

[Hyubert]

можно попробовать это (из документации)

<!-- при добавлении слушателя события можно использовать capture mode -->
<!-- т.е. событие, нацеленное на внутренний элемент, обрабатывается здесь до обработки этим элементом -->
<div v-on:click.capture="doThis">...</div>

<!-- вызывать обработчик только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div v-on:click.self="doThat">...</div>

[Сергей Соколов]

Hyubert, спасибо, попробовал. .self полностью отменяет действие клика по всему элементу, меню работает. .capture ничего не меняет, вроде бы: меню откывается, но при этом срабатывает и событие клика по всему элементу, к сожалению. Как и в исходной проблеме.

[Hyubert]

Сергей Соколов, мне кажеться иx нужно вместе использовать - capture на меню, self - на title

[Сергей Соколов]

Hyubert, меню активируется через "activator" slot. Для него нет отлова события, куда бы дописать .capture

[Hyubert]

Сергей Соколов, ну при рендере береться же с template или я что то путаю?

Answer 1

[Владимир Проскурин]

v-on:click.stop - stop уберите
UPD: добавьте @click.stop к v-list-tile-action а у v-list-tile оставьте просто v-on:click="goDetails(user.id)"
https://jsfiddle.net/z9mf503r/

Comments

[Сергей Соколов]

Это ничего не изменило. Клик по маленькой иконке вместо открытия меню обрабатывается как клик по всему tile'у.

[Владимир Проскурин]

Сергей Соколов, обновил ответ.

[Сергей Соколов]

Спасибо большое! Vue/Vuetify для меня новые, не знал деталей.