I am only able to access currentView and subTask, but not subTasks2. Although I'm following the same approach. I want to access the array of objects branches and report in the response. Any hint, please?
[
{
"id": "sss",
"name": "TestDemo",
"visibility": "ss",
"projects": [
{
"name": "ss",
"branchs": [
{
"name": "master",
"state": "none",
"report": {
"branchName": "master",
"projectName": "ss",
"organizationName": "TestDemo",
"failedRuns": 0,
"totalRuns": 0,
"successRunsPercentage": 100
}
}
]
}
]
}
]
Template vuejs (First two binds are working fine). I still want to access branchs and report
<div id="ID1">
<ul>
<li v-for="currentView in responseTest" :key="currentView.id" >
{{ currentView.name }} - {{ currentView.visibility }}
<ul>
<li v-for="subTask in currentView.projects " :key="subTask.id" >
{{ subTask.name }} - {{ subTask.branchs }}
</li>
</ul>
<ul>
<li v-for="subTask2 in subTask.branchs " :key="subTask2.id" >
{{ subTask2.name }} - {{ subTask2.state }}
</li>
</ul>
</li>
</ul>
</div>
The issue you're facing is that subTask is undefined in your third v-for due to incorrect nesting.
You can only access your variables assigned from the v-for inside child components of that element.
The element your subTask2 in subTask.branchs loop needs to be a child of the element that has the subTask variable.
For example:
<div id="ID1">
<ul>
<li v-for="currentView in responseTest" :key="currentView.id">
{{ currentView.name }} - {{ currentView.visibility }}
<ul>
<li v-for="subTask in currentView.projects" :key="subTask.id">
{{ subTask.name }} - {{ subTask.branchs }}
<ul>
<li v-for="subTask2 in subTask.branchs" :key="subTask2.id">
{{ subTask2.name }} - {{ subTask2.state }}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
You may need to play about with the structure and formatting to make it look right but that example should be runnable.
Related
Please consider the codes below:
sidebar_components: [
{
title: "Admin Managment",
href: "javascript:void(0)",
idAcc: "accordion-1",
value: ["this is a test 1", "this is test 2", "this is test 3"],
to: ["/testi_1/1", "/testi_1/2", "/testi_1/3"],
classDiv: "active_div_1",
class: "item_link_1",
accordion: "myAccordion1",
icon: "fas fa-user-tie",
titleHoverClass: "sidebar_title"
},
{
title: "Admin Managment",
href: "javascript:void(0)",
idAcc: "accordion-2",
value: ["this is a test 1", "this is test 2", "this is test 3"],
to: ["/testi_2/1", "/testi_2/2", "/testi_2/3"],
classDiv: "active_div_2",
class: "item_link_2",
accordion: "myAccordion2",
icon: "fas fa-users",
titleHoverClass: "sidebar_title"
},
]
and :
<ul class="sidebar_components accordion" role="tablist">
<li v-for="(item, index) in sidebar_components" :key="index">
<a
:href="item.href"
v-b-toggle="item.idAcc"
:class="[item.class, 'item_link']"
>
<i :class="item.icon"></i>
<span
class="sidebar_title_active"
:class="item.titleHoverClass"
>{{ item.title }}</span
>
</a>
<b-collapse
:id="item.idAcc"
:accordion="item.accordion"
role="tabpanel"
:class="item.classDiv"
>
<nuxt-link
:to="val"
v-for="(val, index) in item.to"
:key="index"
>
{{ val }}
</nuxt-link>
</b-collapse>
</li>
</ul>
as you can see on this
<nuxt-link :to="val" v-for="(val, index) in item.to" :key="index">
{{ val }}
</nuxt-link>
I used of val that would be link address, I'm gonna have the value of sidebar_components that its name is value, I mean these: value: ["this is a test 1", "this is test 2", "this is test 3"],
how can I extract or get access to the value of it, these arrays are for sidebar sub-items everything working fine, but I don't know how can I implement or put these value of sidebar_components on nuxt-link, it can be a span on it I know but, how can I extract it?
If you do not understand what I mean, please let me know in the
comments so that I can explain more.
Just use the index in v-for to access the sibling field value :
<nuxt-link
:to="val"
v-for="(val, index) in item.to"
:key="index"
>
{{ item.value[index] }}
</nuxt-link>
Couldn't find a better title, my issue is hard to describe in one sentence. I'm trying to loop through an imported object generated by some third party package, but its structure is problematic:
obj: {
"name1": {
"property1": "value1",
"property2": "value2",
},
"name2": {
"property1": "value3",
"property2": "value4",
},
"name3": {
"property1": "value5",
"property2": "value6",
}
}
I want to display not just property1 and property2 but also the name preceding these:
- name1
value1
value2
- name2
value3
value4
...
This is the code I have so far:
<ul>
<li v-for="(item, i) in obj" :key="index">
{{ item.property1 }}
<br>
{{ item.property2 }}
</li>
</ul>
How can I display the name as well, given this object' odd structure?
JSFiddle
Just add key property in your v-for loop and render it :
<li v-for="(item,key, i) in obj" :key="index">
{{key}}
<br>
{{ item.property1 }}
<br>
{{ item.property2 }}
</li>
Loop the object key with Object.keys(), and display the object value from the key with another v-for
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="(item, i) in Object.keys(obj)" :key="index">
{{ item }}
<ul>
<li v-for="(property, key) in obj[item]" :key="property">
{{ key }} -> {{ property }}
</li>
</ul>
</li>
</ul>
</div>
In my laravel 5.7 / Vuejs ( vue": "^2.6.10" ) / "bootstrap": "^4.3.1" application
using accordion I want in debugging purpose show 1 block openec with template like:
<div :id="'collapse'+nextStateWithRegion.id" v-bind:class="'collapse'+{ ' show' : nextStateWithRegion.id == debugging_state_id }" :aria-labelledby="'heading'+nextStateWithRegion.id"
data-parent="#accordion_hostels_by_location">
<div class="card-body">
<!--{{ nextStateWithRegion.regionsOfStateArray }}-->
<ul>
<li v-for="nextRegionOfState, index in nextStateWithRegion.regionsOfStateArray" :key="nextRegionOfState.id">
<!--nextRegionOfState::{{ nextRegionOfState }}-->
<router-link :to="{ name: 'hostelsByRegion', params: { region_id: nextRegionOfState.id, state_id : nextRegionOfState.state_id } }"
class="nav-link">{{ nextRegionOfState.name }}
<small>( {{ nextRegionOfState.related_common_hostels_count }} hostels with {{ nextRegionOfState.related_featured_hostels_count }}
featured)</small>
</router-link>
</li>
</ul>
</div>
</div>
but result is different, as I see not ‘ show’ string added to the class, but ‘[object Object]’ :
https://imgur.com/a/YWenuxh
Which way is correct ?
Thanks!
I'm trying to do a for loop of a set of objects but since they all aren't named the same, I'm stuck.
<div id="components-demo">
<div>Travel Information</div>
<ul>
<li
v-for="(todo, index) in todos"
v-bind:id="index"
v-bind:title="todo"
>{{todo}}</li>
</ul>
</div>
var newData = #Html.Raw(Json.Encode(Model));
// Object returns like { Passenger: "Tom Jones", Airline: "United Airways", Destination: "Atlanta, GA", etc. }
var vm = new Vue({
el: '#components-demo',
data: {
todos: [
{ newData }
]
}
})
In the developer tools in Vue, it lists out the object fine like:
todos: Array [1]
0: Object
Passenger: "Tom Jones"
Airline: "United Airways"
Destination: "Atlanta, GA"
etc.
At the end I'm looking to list out li's containing these items but can't seem to loop through unless I specify exactly each one.
According to the object you say is constructed.
<div id="components-demo">
<div>Travel Information</div>
<ul>
<li v-for="(item, index) in todos" :key="index">{{ item.Passenger }}</li>
</ul>
</div>
To list out dynamic objects using nested loop:
<div id="components-demo">
<div>Travel Information</div>
<ul>
<li v-for="(item, index) in todos" :key="index">
<ul>
<li v-for="(value, key) in item" :key="key">{{ key }} : {{ value }}</li>
</ul>
</li>
</ul>
</div>
You are assigning the object to an array, you can just loop through the object directly https://jsfiddle.net/cckLd9te/4656/
data: {
todos: newData
},
I have array like below
data() {
return {
shoppingItems: [
{name: 'apple', price: '10'},
{name: 'orange', price: '12'}
]
}
}
I am trying to iterate like below
<ul>
<li v-for="item in shoppingItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>
I am getting output like below
apple - 10
orange - 12
But I would like to get output like below
name - apple, price - 10 //I would like to print key dynamically
name - orange, price - 12
You can use (key,value) pair in for loop
var app = new Vue({
el:'#app',
data() {
return {
shoppingItems: [
{name: 'apple', price: '10'},
{name: 'orange', price: '12'}
]
}
}
});
li span{
text-transform: capitalize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in shoppingItems">
<span v-for="(v,i,count) in item">{{i}} - {{v}}<span v-show="count<(Object.keys(item).length-1)
">, </span></span>
</li>
</ul>
</div>
You can iterate over the keys/values with this :
<div v-for="(value, key) in object">
{{ key }} - {{ value }}
</div>
You can also have the index of the current key :
<div v-for="(value, key, index) in object">
{{ key }} - {{ value }}
// if index > 0, add comma
</div>
Use default way of Vue to do this
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
Easy and simple
Object.Keys(Object) returns an array containing all the key of the object. Now you can use index to fetch the desire key -
<ul>
<li v-for="item in shoppingItems">
{{ Object.keys(item).indexOf(0) }} : {{ item.name }} - {{ Object.keys(item).indexOf(1) }} : {{ item.price }}
</li>
</ul>
Let's assume that we have a person array or list which contain person object persons:
[{name:'Suru', age:4, hairColor:'red'}, {name: 'Sofia', age:'5', hairColor:'green'}]
Now let's loop through person list and get key, value, and index
new Vue({
el: '#app',
data: {
persons: [
{name: 'Suru', age: 4, hairColor: 'red'},
{name: 'Sofia', age: '5', hairColor: 'green'}
]
}
});
<script src="https://unpkg.com/vue"></script>
<div id='app'>
<ul>
<li v-for="person in persons">
<span v-for="(value, key, index) in person">
{{key}}: {{value}} - {{index}}<br>
</span>
<br>
</li>
</ul>
</div>