vueJS 2，如何将javascript动态绑定到组件答案

【问题标题】：vueJS 2, how to bind javascript to a component dynamicallyvueJS 2，如何将javascript动态绑定到组件
【发布时间】：2017-08-07 21:10:58
【问题描述】：

模板：

<template v-for="(item, i) in items">
          <v-divider
            v-if="item.divider"
            class="my-4"
            :key="i"
          ></v-divider>
          <v-list-tile
            :key="i"
            v-else
            :to="item.to"
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>

脚本部分：

export default {
    name: 'sideMenu',
    data () {
      return {
        toggleKeyboardShortcuts: false,
        items: [
          { icon: 'add', text: 'Create new question', to: '/question' },
          { divider: true },
          { icon: 'lightbulb_outline', text: 'Notes', to: '#' },
          { icon: 'touch_app', text: 'Reminders', to: '#' },
          { divider: true },
          { icon: 'settings', text: 'Settings', to: '#' },
          { icon: 'help', text: 'Help', to: '#' },
          { icon: 'keyboard', text: 'Keyboard shortcuts', events: { 'click': this.toggleKeyboardShortcutsDialog.bind(this) } },
          { icon: 'phonelink', text: 'App downloads', to: '#' }
        ]
      }
    },... more stuff, but not relevant for this question

我能够传递不同的属性并且事情正在正确呈现，但是传递一个 JavaScript 函数以在单击此列表中的一个项目时执行会惨遭失败。我需要这种行为来触发一个对话框（使用路由器访问页面）

【问题讨论】：

您是否尝试过使用@click 属性？
@click="item.js" 在v-for 循环中？我不确定我会在几分钟内尝试一下
似乎不起作用。
您不想使用item.event.click 吗？
这是我找到的方向，但实施....失败了。我在这个循环中已经有一个v-if 并且并非所有元素都弹出对话框。

标签： javascript vuejs2 vue-component

【解决方案1】：

@click 是你想要的触发器，但是@click 只能调用组件中定义的方法。

所以一个快速的脏将是一个函数内部的方法，它接受项目数组的索引值，然后从方法内部调用你想要的实际函数。

我写了一支快速笔，因为我的解释令人困惑：https://codepen.io/anon/pen/QMpgGN?editors=1111

html:

<div id="app">
  <template>
      <button v-for="(o, i) in items" @click="dynamicFunc(i)">
        {{ o.text }}
      </button>
  </template>
</div>

js: (没有 vue-loader)

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {
          text: "test",
          click: function() {alert("hi~")}
        }
      ]
    }
  },
  methods: {
    dynamicFunc(i) {
      this.items[i].click()
    }
  }
})

【讨论】：