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事件。 E.g：

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属性。但你所谓的是一个没有返回任何价值的函数。我想知道您是否检查开发人员控制台，您可能会收到与编译模板相关的错误。无论如何“：”意味着绑定，我不认为绑定是你想要做的。

Vue方法没有开火

3 个答案: