Currently, I am working on creating a table using DataGrid in Vue. My goal is to populate the table with data from a v-for loop. However, I am facing some challenges in displaying the values such as {{user.name}}, {{user.email}}, and {{rol.name}}. As a beginner in this area, I have tried various methods but haven't been successful yet. Any guidance would be greatly appreciated.
For example:
<DxDataGrid
:columns="columns"
:show-borders="true"
:focused-row-enabled="true">
<div v-for="(user,index) in usersData" :key="index">
<DxColumn caption="User">{{user.name}}</DxColumn>
<DxColumn caption="Email">{{user.email}}</DxColumn>
<span v-for="(rol,index) in user.roles" :key="index">
<DxColumn caption="Roles">{{rol.name}}</DxColumn>
</span>
</div>
</DxDataGrid>