CODEWITHSUNDEEP
javascriptvue.js
anonymous0209
anonymous0209

Reputation: 3

Loop through a computed property Vue

I have a component with the following data which is a simple array:

data() {
        return {
            permissions: [
           { id: '1' , name: 'create'},
           { id: '2' , name: 'edit'},
           { id: '3' , name: 'delete'}
           ]
        }
    }

Also, I have created the following computed property that uses this array and returns an array of objects:

computed: {
     getFormPermissionId(){
       var permission = this.permissions
       for(let i = 0;i < permission.length; i++ ) {
         return  permission[i].id
       }
     }
  }

I want this output in template without v-for like this:

1
2
3

I don't have idea on how to apply in template. Here is my code https://codepen.io/thon0209/pen/vPybWw

Thank you :)

var app = new Vue({
  el: '#app',
  data() {
    return{
      permissions: [
        {
          id:1,
          name:'create'
        },
        {
          id:2,
          name:'edit'
        },
        {
          id:3,
          name:'delete'
        }
     ]
    }
  },
  computed: {
     getFormPermissionId(){
       var permission = this.permissions
       for(let i = 0;i < permission.length; i++ ) {
         return  permission[i].id
       }
     }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">  
  {{getFormPermissionId}}
</div>

Upvotes: 0

Views: 14243

Answers (3)

Sheng
Sheng

Reputation: 31

Here's what you can do:

<div id="app">  
 <div v-for="(item, index) in permissions" :key="index">
    {{item.id}}
    <br/>
  </div>
</div>

And you can just remove the computed.

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36594

You are using return which will stop further execution of function. You can create a variable and inside loop concat the values to that variable and return it in the end.

var app = new Vue({el: '#app',data() {return
{permissions: [
        {id:1,name:'create'},
        {id:2,name:'edit'},
        {id:3,name:'delete'}]
    }
  },
  computed: {
     getFormPermissionId(){
       var permission = this.permissions
       let result = '';
       for(let i = 0;i < permission.length; i++ ) {
         result += permission[i] + '<br>'
       }
       return result;
     }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">  
  {{getFormPermissionId}}
</div>

Upvotes: 2

Sourabh Somani
Sourabh Somani

Reputation: 2138

You can create string and can do the same

var app = new Vue({
    el: '#app',
    data() {
        return {
            permissions: [{
                    id: 1,
                    name: 'create'
                },
                {
                    id: 2,
                    name: 'edit'
                },
                {
                    id: 3,
                    name: 'delete'
                }
            ]
        }
    },
    computed: {
        getFormPermissionId() {
            var permission = this.permissions;
            //Creating String 
            str = "";
            for (let i = 0; i < permission.length; i++) {
                 str += permission[i].id + "\n";
            }
            return str;
        }
    }
})

Complete Example

    var app = new Vue({
        el: '#app',
        data() {
            return {
                permissions: [{
                        id: 1,
                        name: 'create'
                    },
                    {
                        id: 2,
                        name: 'edit'
                    },
                    {
                        id: 3,
                        name: 'delete'
                    }
                ]
            }
        },
        computed: {
            getFormPermissionId() {
                var permission = this.permissions;
                //Creating String 
                str = "";
                for (let i = 0; i < permission.length; i++) {
                    str += permission[i].id + "\n";
                }
                return str;
            }
        }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">  
  {{getFormPermissionId}}
</div>

Upvotes: 1

Related Questions