vueJS 2，如何綁定的JavaScript動態組件

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函數來執行。我需要這種行爲觸發一個對話框（使用路由器的作品訪問頁）

Answer 1

@單擊是你想要的觸發，但@單擊只能調用在組件中定義的方法。

如此快速的髒是內部方法的功能是接受項目數組的索引值，然後從方法內部，調用你想要的實際功能。

我寫了一個快速的筆，因爲我的解釋是混亂的：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裝載機）

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