vueJS 2, wie Javascript, an eine Komponente zu binden dynamisch

Question

Vorlage:

<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> 

Script Abschnitt:

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 

Ich bin in der Lage sind, machen richtig unterschiedliche Attribute und Dinge passieren , aber die Übergabe einer JavaScript-Funktion, die ausgeführt werden soll, wenn ein Element dieser Liste bei einem Klick nicht mehr funktioniert. Und ich brauche dieses Verhalten, um einen Dialog auszulösen (Zugriff auf Seiten mit Router funktioniert)

Answer 1

@click ist der Trigger, den Sie wollen, aber @click kann nur Methoden aufrufen, die in der Komponente definiert sind.

so eine schnelle und schmutzig wäre eine Funktion innerhalb der Methode, die den Indexwert des Elements-Array akzeptiert, und dann von innerhalb der Methode, rufen Sie die eigentliche Funktion, die Sie wollen.

ich einen schnellen Stift geschrieben, weil meine Erklärung verwirrend ist: 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: (ohne vue-loader)

Verwendung

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