I have a ponent 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 puted property that uses this array and returns an array of objects:

puted: {
     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

Thank you :)

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

<script src=".5.17/vue.js"></script>

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

I have a ponent 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 puted property that uses this array and returns an array of objects:

puted: {
     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'
        }
     ]
    }
  },
  puted: {
     getFormPermissionId(){
       var permission = this.permissions
       for(let i = 0;i < permission.length; i++ ) {
         return  permission[i].id
       }
     }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>

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

• javascript
• vue.js

Share Improve this question Follow edited Mar 7, 2019 at 5:37 yqlim 7,11833 gold badges2020 silver badges4444 bronze badges asked Mar 7, 2019 at 5:27 anonymous0209anonymous0209 311 gold badge11 silver badge33 bronze badges 4

• Try include your code here. Try produce a minimal reproducible example. – Tyl Commented Mar 7, 2019 at 5:32
• 2 For what I can see on your code, it appears that getFormPermissionId() will always return permission[0].id – Shidersz Commented Mar 7, 2019 at 5:33
• 1 You want to output an array like [1,2,3] or log 1 2 3 – Maheer Ali Commented Mar 7, 2019 at 5:37
• why you dont use v-for directive? – curious lad Commented Mar 7, 2019 at 6:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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'}]
    }
  },
  puted: {
     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./ajax/libs/vue/2.5.17/vue.js"></script>

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

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'
                }
            ]
        }
    },
    puted: {
        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'
                    }
                ]
            }
        },
        puted: {
            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./ajax/libs/vue/2.5.17/vue.js"></script>

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

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 puted.