Question

模板：

<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函数来执行。我需要这种行为来触发Dialog（使用路由器工作访问页面）

Answer 1

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

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

我写了一支快笔，因为我的解释令人困惑：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()
    }
  }
})

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

1 个答案: