首页 > javascript > 循环计算属性Vue

循环计算属性Vue (Loop through a computed property Vue)

2019-03-07 javascriptvue.js

问题

我有一个包含以下数据的组件,它是一个简单的数组:

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

我希望这个输出在模板中没有v-for像这样:

1
2
3

我不知道如何申请模板。这是我的代码https://codepen.io/thon0209/pen/vPybWw

谢谢 :)

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>


解决方法

您正在使用return它将停止进一步执行功能。您可以创建一个变量,并在内部循环中将值连接到该变量,return最后将其连接起来。

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>


问题

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>

解决方法

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>

相似信息