0
198
Vistas¿Cómo puedo reemplazar o cambiar el objeto en los datos?
En mi tabla, representa una matriz de usuarios como filas en una tabla con <tr v-for="user in users" :key="user.id">
Para los roles de la columna, en lugar de obtener administrador o usuario. Los datos envían un 1 para administrador y 2 para usuario. ¿Hay alguna manera de que pueda reemplazar la matriz de ese objeto? si es 1 = administrador, 2 = usuario
data() { return { users: [] } getUsers() { axios.get(url).then(response => { this.users = response.data.report.users }) } <tbody> <tr v-for="user in users" :key="user.id"> <td>{{user.firstName}} {{user.lastName}}</td> <td>{{user.email}}</td> <td>{{user.role}}</td> </tr> </tbody> 
3 Respuestas
Responde la pregunta0
Lo que está entre {{ }} se ejecutará como Javascript y mostrará el resultado, escapado con caracteres HTML. Debido a que 1 = administrador y 2 = usuario, podemos usar una matriz donde mantenemos el índice 0 vacío. Por ejemplo:
<td>{{ ['', 'Admin', 'User'][user.role] }}</td>Esta asignación obtendrá el índice 1 o 2 de la matriz y usará ese valor como salida.
0
Tienes varias formas. Puede expandir la respuesta para tener "user.role_name" o puede hacerlo manualmente en su TD.
<tbody> <tr v-for="user in users" :key="user.id"> <td>{{user.firstName}} {{user.lastName}}</td> <td>{{user.email}}</td> <td> <span v-if="user.role === 1">Admin</span> <span v-else-if="user.role === 2">User</span> <span v-else>Guest</span> </td> </tr> </tbody>0
Una forma con propiedad calculada:
new Vue({ el: '#demo', data() { return { users: [], roles: ['admin', 'user'] } }, computed: { fixUsers() { return this.users.map(u => { return { ...u, role: this.roles[u.role-1] || 'no role' } }) } }, methods: { getUsers() { //your api call this.users = [{id: 1, firstName: 'aaa', lastName: 'bbb', email: 'aa@aa', role: 1}, {id: 2, firstName: 'bbb', lastName: 'bbb', email: 'bb@bb', role: 2}] } }, mounted() { this.getUsers() } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tbody> <tr v-for="user in fixUsers" :key="user.id"> <td>{{user.firstName}} {{user.lastName}}</td> <td>{{user.email}}</td> <td>{{user.role}}</td> </tr> </tbody> </table> </div>