How can I replace or change object in data?-CodePudding

In my table it renders an array of users as rows in a table with <tr v-for="user in users" :key="user.id">

For the the column roles, instead of getting admin or user. The data is sending a 1 for admin and 2 for user. Is there a way that I can replace the array of that object? if its 1 = admin, 2 = user

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>

CodePudding user response：

What is between {{ }} will execute as Javascript and show the output, escaped with HTML characters. Because 1 = admin and 2 = user, we can use an array where we keep index 0 empty. For example:

<td>{{ ['', 'Admin', 'User'][user.role] }}</td>

This mapping will get index 1 or 2 out of the array and use that value as an output.

CodePudding user response：

You have several ways. You can expand the response in order to have "user.role_name" or you can do it manually in your 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>

CodePudding user response：

If you know that your application will only ever have the two roles (usually NOT a safe assumption) you could use a simple ternary statement.

<td>{{ user.role == 1 ? 'Admin' : 'User' }}</td>

A better way would probably be taking @Niels answer above a step further. You could create a role look up object as a data property on the component.

<template>
  <!-- other template -->

   <td>{{ roleLookup[user.role] }}</td>

  <!-- other template -->
</template>

<script>
  data: () => ({
    roleLookup: {
      1: 'Admin',
      2: 'User'
    }
  })
</script>

This would allow you easily expand the lookup if you added more roles to the app. Or if the data changed to string values for each role you could easily map those to the desired display text.

i.e.

roleLookup: {
  administrator: 'Admin',
  nonadmin: 'User'
}

CodePudding user response：

One way with computed property:

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>