Vue 方法不触发

Question

我正在开发一个使用 Vue2 (2.5.3) 和 Vue Tables 2. All I am trying to do is add an anchor around each row, as the 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

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

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

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

Answer 2

我看到的第一个问题是，我无法从文档中看出如何按照您建议的 link 方式包装整行。您可以自定义多个 pre-defined slots，您还可以为传入 columns 属性的每一列使用一个插槽。

Templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways:

请注意细胞。因此，您可以通过将列的名称指定为插槽来为每个单独的单元格提供模板。

在您的示例中，没有 edit 列，因此实际上没有呈现任何内容。

您可以将 edit 列添加到 columns:

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

然后你的模板就可以工作了；它会将字体真棒图标添加到 table.

中的列

这里是an example.

Answer 3

您可以使用 vue-tables.row-click 事件。例如：

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

见

Vue 方法不触发

Vue method not firing

javascript

vue.js

vue-component

vuejs2

vue-tables-2