DevExtreme DxDataGrid 按钮列中的单击事件不会触发

Question

我有以下代码：

<template>
    <div>
        <DxDataGrid :dataSource="viewerRoles">
            <DxColumn data-field="name"
                      caption="Ansicht" />
            <DxColumn data-field="description"
                      caption="Beschreibung" />
            <DxColumn type="buttons">
                <DxButton icon="preferences"
                          @click="test" />
            </DxColumn>
        </DxDataGrid>
        <button @click="test"></button>
    </div>
</template>

<script>
    import { DxDataGrid, DxColumn, DxButton } from 'devextreme-vue/data-grid'

    export default {
        name: 'Test',
        components: {
            DxDataGrid, DxColumn, DxButton
        },
        data() {
            return {
                viewerRoles: []
            }
        },
        async created() {
            const svcResp = await this.$http.get('Settings/ViewerRoles');

            if (svcResp.status === 200)
                this.viewerRoles = svcResp.data;
        },
        methods: {
            test() { alert('') }
        }
    }
</script>

奇怪的是，如果我单击 HTML <button>，浏览器会显示警报。但在<DxButton> 上却没有。据我所知，调试控制台没有错误。

我的代码有什么问题？

Answer 1

将DxButton 的@click 改为:on-click，这样您的代码应该如下所示：

<DxColumn type="buttons">
  <DxButton icon="preferences"
            :on-click="test" />
</DxColumn>