javascript - 在 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://v2.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 时不会注册任何监听器。

我个人更喜欢我之前描述的对象语法，但为了完整起见，我认为它值得一提。