Javascript Vue方法不点火_Javascript_Vue.js_Vuejs2_Vue Component_Vue Tables 2

Javascript Vue方法不点火

javascript vue.js vuejs2

Javascript Vue方法不点火,javascript,vue.js,vuejs2,vue-component,vue-tables-2,Javascript,Vue.js,Vuejs2,Vue Component,Vue Tables 2,我正在从事一个使用Vue2（2.5.3）和。我所要做的就是在每一行周围添加一个锚，如图所示，并调用edit（）函数。然而，它似乎根本没有开火，我没有得到任何错误。知道为什么吗 .vue文件 <template> <div class="col-md-8 col-md-offset-2"> <div id="people"> <v-client-table :data="tableData" :colum

我正在从事一个使用Vue2（2.5.3）和。我所要做的就是在每一行周围添加一个锚，如图所示，并调用

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>


从“vue-tables-2”导入{ServerTable，ClientTable，Event}；
从“Vue”导入Vue；
从“axios”导入axios；
Vue.use（ClientTable{
每页：3
}，假）；
导出默认值{
方法：{
编辑：功能（id）{
控制台日志（“OK”，id）；
}
},
数据（）{
返回{
列：['id'，'name'，'age']，
表格数据：[
{id:1，姓名：“约翰”，年龄：“20”}，
{id:2，姓名：“简”，年龄：“24”}，
{id:3，姓名：“苏珊”，年龄：“16”}，
{id:4，姓名：“克里斯”，年龄：“55”}，
{id:5，姓名：“丹”，年龄：“40”}
]
};
}
}
.VuePagination\u计数{
显示：无；
}

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

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

另外，您使用：href=“edit（props.row.id）”vue的方式是尝试将值绑定到href属性。但您调用的是一个不返回任何值的函数。我想知道您是否检查了开发人员控制台，您可能会得到一个与编译模板相关的错误。总之“：”表示绑定，我不认为绑定是您在这里想要做的。

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

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

另外，您使用：href=“edit（props.row.id）”vue的方式是尝试将值绑定到href属性。但您调用的是一个不返回任何值的函数。我想知道您是否检查了开发人员控制台，您可能会得到一个与编译模板相关的错误。总之“：”意味着绑定，我不认为绑定是您在这里想要做的。

我看到的第一个问题是，我无法从文档中看出如何用链接将整行包装起来。您可以自定义多个，也可以为传递到

columns

属性的每一列使用一个插槽

模板允许您使用vue编译的HTML包装单元格。它可以可通过以下任一方式使用：

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

在您的示例中，没有

edit

列，因此实际上没有渲染任何内容

您可以将

编辑

列添加到

列

：

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

然后你的模板就可以工作了；它会将字体图标添加到表中的一列中

这里是。

我看到的第一个问题是，我无法从文档中看出用链接包装整行的方法。您可以自定义多个，也可以为传递到

columns