How can I replace or change object in data?

user_17945830 0
Viewed 75

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 it's 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>

table

vuejs2 vue.js javascript
5 Answers

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.

user_10419480

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>

user_119891890

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'
}
user_15954740

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>
user_194458100

vue2,use filter

    <tbody>
      <tr v-for="user in users" :key="user.id">
       <td>{{user.firstName}} {{user.lastName}}</td>
       <td>{{user.email}}</td>
       <td>{{user.role|judgeRole}}</td>
      </tr>
   </tbody>
    filters:{
      judgeRole(value) {
        return value===1?'admin':'user'
      }
    }

vue3,use function

<tbody>
      <tr v-for="user in users" :key="user.id">
       <td>{{user.firstName}} {{user.lastName}}</td>
       <td>{{user.email}}</td>
       <td>{{judgeRole(user.role)}}</td>
      </tr>
   </tbody>
 setup() {
  const  judgeRole=function(vaule) {
      return value===1?'admin':'user'
    },
     return {
        judgeRole
     }
  }
user_186805490
Related