I am working with a component that contains a simple array as its data:
data() {
return {
roles: [
{ id: '1' , name: 'admin'},
{ id: '2' , name: 'user'},
{ id: '3' , name: 'guest'}
]
}
}
In addition, I have implemented a computed property that interacts with this array and outputs a new array of objects:
computed: {
getRoleId(){
var roleList = this.roles;
let ids = [];
for(let i = 0; i < roleList.length; i++ ) {
ids.push(roleList[i].id);
}
return ids;
}
}
I want to display this output in the template without using v-for, like this:
1
2
3
I am unsure how to achieve this in the template. Here is my code snippet on CodePen here.
Thank you :)
var app = new Vue({
el: '#app',
data() {
return{
roles: [
{
id:1,
name:'admin'
},
{
id:2,
name:'user'
},
{
id:3,
name:'guest'
}
]
}
},
computed: {
getRoleId(){
var roleList = this.roles;
let ids = [];
for(let i = 0; i < roleList.length; i++ ) {
ids.push(roleList[i].id);
}
return ids;
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{getRoleId}}
</div>