CODEWITHSUNDEEP
javascriptvue.js
SGR
SGR

Reputation: 2417

How to perform binding while looping over array

I have an array called users:

 users: [
            { 'name': 'Sam', 'level': 'level 1' },
            { 'name': 'Jhon', 'level': 'level 2'},
            { 'name': 'Doe', 'level': 'level 3'},
            { 'name': 'Jane', 'level': 'level 4'},
            { 'name': 'Smith', 'level': 'level 1'},
            { 'name': 'Roy', 'level': 'level 4'},
        ]

In the template i am looping and displaying users name like this:

   <div id="app">
        <div class="main-div"  v-for="user in users">
           <p>{{user.name}} <span>{{userType}}</span></p>
        </div>
    </div>

As shown in the array(i,e users), there is an property called level, Based on this property i want bind userType (i,e CEO,Manager...so on)like this:

enter image description here

For example if the

level 1 ====> should display 'Director',
level 2 ====> should display 'Manager',..... so on.

Fiddle Example

Upvotes: 0

Views: 46

Answers (2)

Jack jdeoel
Jack jdeoel

Reputation: 4584

No you need methods as a helper for displaying according to its level like below ..

new Vue({
  el: '#app',
  data: {
    users: [
        { 'name': 'Sam', 'level': 'level 1' },
        { 'name': 'Jhon', 'level': 'level 2'},
        { 'name': 'Doe', 'level': 'level 3'},
        { 'name': 'Jane', 'level': 'level 4'},
         { 'name': 'Smith', 'level': 'level 1'},
        { 'name': 'Roy', 'level': 'level 4'},
    ]
  },
  methods: {
    userType: function(level) {
      let type = ''
      switch(level) {
        case 'level 1': type = 'CEO';break;
      	case 'level 2': type = 'Director';break;
        case 'level 3': type = 'Manager';break;
        case 'level 4': type = 'employee'; break;
      }
      return type
    }
  }
})
#app {
  padding: 20px;
}

h3 {
  font-weight: bold;
}

span {
  fonct-weight: bold;
  color: red;
}
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h3>Users</h3>
  <div class="main-div" v-for="user in users">
    <p>{{user.name}} <span>{{userType(user.level)}}</span></p>
  </div>
</div>

Upvotes: 2

Sudhir Roy
Sudhir Roy

Reputation: 266

You should have some array of levels mapped with userType or you can add new property in the user array. For Ex: [{name: "XYZ", level: "level1", userType: "Director"} ...]

If you don't have this array then you need to add a condition or the function which checks and return back to you. For Ex:

{{getUserInfo(user)}}

getUserInfo(user) {
  if (user.level === 'Level1') {
    return user["name"] + ' Manager'
}

Upvotes: 0

Related Questions