Vue-Methode nicht feuern

Question

Ich arbeite an einem Projekt, das Vue2 (2.5.3) zusammen mit Vue Tables 2 verwendet. Alles, was ich versuche, ist, um jede Zeile einen Anker hinzuzufügen, wie der linked example zeigt, und die edit()-Funktion aufzurufen. Es scheint jedoch überhaupt nicht zu brennen und ich bekomme keine Fehler. Irgendeine Idee warum das ist?

.vue Datei

<template> 
    <div class="col-md-8 col-md-offset-2"> 
     <div id="people"> 
      <v-client-table :data="tableData" :columns="columns"> 
       <template slot="edit" slot-scope="props"> 
        <div> 
         <a class="fa fa-edit" :href="edit(props.row.id)"></a> 
        </div> 
       </template> 
      </v-client-table> 
     </div> 
    </div> 
</template> 

<script> 
    import {ServerTable, ClientTable, Event} from 'vue-tables-2'; 
    import Vue from 'vue'; 
    import axios from 'axios'; 

    Vue.use(ClientTable, { 
     perPage: 3 
    }, false); 

    export default { 
     methods: { 
      edit: function(id){ 
       console.log("OK", id); 
      } 
     }, 
     data() { 
      return { 
       columns: ['id','name','age'], 
       tableData: [ 
        {id:1, name:"John",age:"20"}, 
        {id:2, name:"Jane",age:"24"}, 
        {id:3, name:"Susan",age:"16"}, 
        {id:4, name:"Chris",age:"55"}, 
        {id:5, name:"Dan",age:"40"} 
       ] 
      }; 
     } 
    } 
</script> 

<style lang="scss"> 
.VuePagination__count { 
    display:none; 
} 
</style> 

Answer 1

Das erste Problem, das ich sehe, ist, dass es keine Möglichkeit gibt, dass ich aus der Dokumentation erkennen kann, eine ganze Reihe so zu verpacken, wie Sie mit einem Link vorschlagen. Es gibt mehrere pre-defined slots, die Sie anpassen können, und Sie können auch einen Steckplatz für jede Spalte verwenden, die Sie an die columns-Eigenschaft übergeben.

Vorlagen ermöglichen es Ihnen, Ihre Zellen mit vue-kompiliertem HTML zu umhüllen. Es kann in eine der folgenden Arten verwendet werden:

Beachten Sie, dass Zellen sagt. Sie können also eine Vorlage für jede einzelne Zelle bereitstellen, indem Sie den Namen der Spalte als Slot angeben.

In Ihrem Beispiel gibt es keine edit Spalte, so dass nichts gerendert wird.

Sie könnten hinzufügen, eine edit Spalte columns:

columns: ['edit', 'id','name','age'], 

Und dann würde die Vorlage arbeiten; es würde das font awesome icon zu einer Spalte in der Tabelle hinzufügen.

Hier ist an example.

Answer 2

Dont die href auf dem Anker-Tag verwenden, um Ihr Click-Ereignis auslösen. Machen Sie es wie dieser

<a class="fa fa-edit" href="#" v-on:click="edit(props.row.id)"></a> 

Auch die Art und Weise Sie hatte es mit: href = „edit (props.row.id)“ vue versucht, einen Wert zu Ihrem href Attribut zu binden. Aber was Sie anrufen, ist eine Funktion, die keinen Wert zurückgibt. Ich frage mich, ob Sie in der Entwicklerkonsole einen Fehler beim Kompilieren der Vorlage erhalten. Anyways ":" bedeutet bind, und ich glaube nicht, dass das Binding das ist, was du hier machen willst.

Answer 3

Sie können das Ereignis vue-tables.row-click verwenden. Z. B:

Event.$on('vue-tables.row-click', (row) => { 
    location.href = "/path/to/asset/" + row.id + "/edit"; 
}); 

Siehe Linking a row in a table to a url