Поместить обработчик событий в vuejs?

Question

Я пытаюсь что-то выяснить и у меня проблемы с этим.У меня есть некоторые данные значков, которые я получаю из массива внутри массива, и я хочу поместить обработчик событий только на один из значков.Например, скажем, поместите обработчик событий на иконку с изображением большого пальца, чтобы скрыть абзац (что-то в этом роде).

Я создал кодовый блок для демонстрации: https://codepen.io/anon/pen/gNxdER

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="desserts"
        item-key="name"
      >
        <template v-slot:items="props">
          <td>{{ props.item.name }}</td>
          <td>{{ props.item.calories }}</td>
          <td>{{ props.item.iron }}</td>
          <td><v-icon v-for="icon in props.item.icons">{{icon}}</v-icon></td>
        </template>
      </v-data-table>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Iron (%)', value: 'iron' },
        { text: 'Icons', value: 'icon'}
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          iron: '1%',
          icons: [
            'search',
            'dashboard',
            'timeline',
            'thumb_up'
          ]
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          iron: '1%',
          icons: [
            'search',
            'dashboard',
            'timeline',
            'thumb_up'
          ]
        },
        {
          name: 'Eclair',
          calories: 262,
          iron: '7%',
          icons: [
            'search',
            'dashboard',
            'timeline',
            'thumb_up'
          ]
        },
        {
          name: 'Cupcake',
          calories: 305,
          iron: '8%',
          icons: [
            'search',
            'dashboard',
            'timeline',
            'thumb_up'
          ]
        }
      ]
    }
  }
})

Спасибо за помощь.

Answer 1

Вы можете сделать что-то подобное, используя v-on:

<v-icon v-for="icon in props.item.icons" v-on="getIconHandlers(icon)">{{icon}}</v-icon>

с:

getIconHandlers (icon) {
  if (icon === 'thumb_up') {
    return {click: this.thumbUpClickHandler}
  }

  return null
}

Вам, конечно, также нужно определить функцию thumbUpClickHandler. Скорее всего, вы захотите передать некоторый контекст для текущей строки в обработчик кликов, чего можно достичь, передав эту дополнительную информацию в getIconHandlers и записав ее в закрытии слушателя:

getIconHandlers (icon, otherStuff /* <- pass whatever you need */) {
  if (icon === 'thumb_up') {
    return {
      click: () => {
        this.thumbUpClickHandler(otherStuff)
      }
    }
  }

  return null
}

Вместо этого можно сделать все это встроенным в шаблоне, но я думаю, что легче понять, вытаскивая его в отдельный метод.

Используется синтаксис объекта, поддерживаемый v-on, очень похожий на v-bind. Это задокументировано в https://vuejs.org/v2/api/#v-on. Свойства этого объекта зарегистрированы как слушатели, используя ключи свойств в качестве имен событий и значения свойств в качестве соответствующих функций слушателей. Для других значков я просто возвращаю null, хотя вы также можете вернуть пустой объект.

Vuetify покажет другой курсор мыши для значков, у которых есть click прослушивателей, и при этом будет изменен только курсор для значка thumb_up, который, как я предполагаю, является намерением.

Обновление:

Поскольку требуется только одно событие, это также можно сделать, используя синтаксис выражения в квадратных скобках для v-on / @. например, * * одна тысяча тридцать две

@[getEventName(icon)]="onThumbIconClick"

Здесь getEventName будет такой метод, как:

getEventName (icon) {
  return icon === 'thumb_up' ? 'click' : null
}

Внутри v-on есть специальная обработка, которая гарантирует, что слушатель не будет зарегистрирован, когда выражение оценивается как null.

Лично я предпочитаю синтаксис объекта, который я описал ранее, но ради полноты я подумал, что стоит упомянуть.

Answer 2

После v-for прикрепить событие click, которое вызовет метод, которому вы передаете элемент.

<v-icon v-for="icon in props.item.icons" @click="iconAction(item, icon)">{{icon}}</v-icon>

В вашем методе вы можете что-то сделать наэлемент, основанный на том, какой элемент был нажат.

methods: {
  iconAction (item, icon){
    if (icon === 'thumbs_up') {
      // do somthing for thumbs_up
    } else if (icon === 'dashboard') {
      // do somthing for dashboard
    }
    ...
  }
}