Vue方法没有触发

Question

我正在开发一个使用 Vue2 (2.5.3) 和 Vue Tables 2 的项目。我要做的就是在每一行周围添加一个锚点，如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

您可以使用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

Answer 3

不要使用锚标签上的 href 来触发你的点击事件。这样做

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

此外，您使用 :href="edit(props.row.id)" vue 的方式是尝试将值绑定到您的 href 属性。但是你调用的是一个不返回任何值的函数。我想知道如果您检查开发人员控制台，您可能会收到与编译模板相关的错误。无论如何“：”表示绑定，我不认为绑定是你想要在这里做的。