Vueメソッドが起動しない

Question

私はVue Tables 2と共にVue2（2.5.3）を使用するプロジェクトに取り組んでいます。私がしようとしているのは、linked exampleが示すように、各行の周りにアンカーを追加し、edit()関数を呼び出すことだけです。しかし、それはまったく発射されないようで、私は何の誤りもありません。これがなぜなのか？

.vueファイル

<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

私が最初に気がついている問題は、ドキュメントから、リンクで提案している方法で行全体を折り返す方法がないことです。 pre-defined slotsをカスタマイズできます。columnsプロパティに渡す各列にスロットを使用することもできます。

テンプレートを使用すると、vueコンパイル済みのHTMLでセルを折り返すことができます。 細胞を言う

注：それは 次のいずれかの方法で使用することができます。したがって、列の名前をスロットとして指定することによって、個々のセルごとにテンプレートを提供することができます。

この例では、edit列は存在しないため、実際には何も描画されません。

あなたが追加することができますedit列columnsへ：

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

そして、あなたのテンプレートが働くだろう。フォントの素晴らしいアイコンがテーブルの列に追加されます。

ここにはan exampleです。

Answer 2

いけない、あなたのクリックイベントをトリガするためにアンカータグにHREFを使用します。また、この

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

のようにそれを行う、あなたがそれを持っていた方法：のhref =「編集（props.row.id）」VUEは、あなたのhref属性に値をバインドしようとしています。しかし、あなたが呼んでいるのは、価値を返さない関数です。開発者コンソールをチェックすると、テンプレートのコンパイルに関連するエラーが発生する可能性があります。とにかく "："はバインドを意味し、バインドはあなたがここでやりたいことだとは思わない。

Answer 3

イベントはvue-tables.row-clickです。例えば：

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

がリンクされている例は、代わりに ``スロットスコープの `スコープ=「小道具」を使用していますLinking a row in a table to a url