Check out the code snippet below:
<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>
Upon testing the buttons in the code, it appears that when clicking the HTML <button>, the browser successfully triggers the alert. However, when clicking the <DxButton>, no response is seen. Surprisingly, no errors are reported in the console during debugging.
If you have any ideas on what might be causing this issue, please let me know!