CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Sue11
Sue11

Reputation: 107

How can I replace or change object in data?

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

Upvotes: 1

Views: 175

Answers (5)

北风吹天亦寒
北风吹天亦寒

Reputation: 41

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

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

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>

Upvotes: 1

Anthony Trombetta
Anthony Trombetta

Reputation: 140

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

Upvotes: 1

Mirko Camarda
Mirko Camarda

Reputation: 1

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>

Upvotes: 0

Niels
Niels

Reputation: 49949

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.

Upvotes: 1

Related Questions