I have this API result for products - get request:
All of my data is inside object "data". How to fetch these products?
My Vue code:
<tr v-for="product in products" v-bind:key="product.id">
<td>{{ product.data[1].ID}}</td>
</tr>
But this only gives me data from data1 object. I want to foreach all of these inside "data" array.
If your list is nested in some object, you can simply access it from the v-for loop
v-for="product in products.data"
You can also create a variable, that stores that value directly and then pass this variable to the loop
const productsList = products.data;
v-for="product in productsList"
Related
I have a grid created for videos. It makes a call to an api to return back videos. I have a state isFetching that is set to true when the page loads and tries to retrieve the list from the API. After the videos are retrieved, isFetching is set to false and the data is stored as videoList.
I am using a grid with a placeholder component for each item if the API takes a while to fetch. The VideoGrid expects a items because inside of it, it iterates through it. I want to have 16 grid items but I don't want to have to do :items=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]. I tried :items="[new Array(16).keys()] but that seems to create a nested array. Is there a way to accomplish this without having to write it out like that?
Main.vue
<VideoGrid v-if="isFetching && !videoList" :items="[1,2,3,4,5,6]">
<template>
<ItemPlaceholder />
</template>
</VideoGrid>
<VideoGrid v-else :items="videoList">
<template v-slot="slotProps>
<VideoComponent :title="slotProps.title" />
</template>
</VideoGrid>
You should just be able to remove the brackets from your items declaration like so:
<VideoGrid v-if="isFetching && !videoList" :items="Array(16).fill(1)">
<template>
<ItemPlaceholder />
</template>
</VideoGrid>
<VideoGrid v-else :items="videoList">
<template v-slot="slotProps>
<VideoComponent :title="slotProps.title" />
</template>
</VideoGrid>
Array(16).fill(1) will create an array with 16 number 1's. If you want to have incrementing values in your array you can use Array.from({length: 16}, (v, i) => i) or see How to initialize an array's length in JavaScript?.
in Vue I am using vuex state for generating elements, it works when it runs for the first time but when I update Vuex state which I am using that for generating elements in v-for it doesnt generate more than one element!
this is my code:
<div v-for="(group, index) in $store.state.eventManagement.groupCount" v-bind:key="index" class="match">
<div class="groupTitle">{{group}}</div>
<div v-for="(team, teamIndex) in groupTeamCount" v-bind:key="teamIndex" class="teamName">
(#{{ (groupTeamCount * index) + teamIndex+1 }}) <span v-if="seeds[(groupTeamCount * index) + teamIndex] !== ''">{{seeds[(groupTeamCount * index) + teamIndex].username}}</span>
<div class="addSeed" v-on:click="changeSeedNumber((groupTeamCount * index) + teamIndex)">+</div>
</div>
</div>
What is wrong? What do you think?
$store.state.eventManagement.groupCount in the outer v-for reads like it is the count in a collection. If correct, then this is a single value.
Do you need to loop over $store.state.eventManagement (or whatever the correct name for the collection in the store is)?
Solved:
The problem was because of input that is changing the value of groupCount state. Its a number type input, so I thought that it passes integer but it doesn't, it passes a string, thus v-for generates just one element.
I used parseInt to solve this problem
How can we define new iterator like v-for (for example v-for2) that iterate over an array ?
I want to accumulate one property of array items.
the result would be like this :
<div v-for2="(item, accumulated) in [1,2,3,4,5,6]">
{{accumulated}}
</div>
What is the best way to pass a lot of property values to a component?
Right now I am doing this:
<list-li
v-for="item in items"
:key="item.id"
:id="item.id"
:user="item.user"
:branch="item.branch"
:title="item.title"
></list-li>
Is there a way to pass one variable containing all the data instead of having to write out :someValue of every data value?
Also, if item.title does not exist, what would happen with :title="item.title"?
You can pass an object to the v-bind directive. Each property of the object will assign that property name and value to the component.
So in your case, you could just pass the item:
<list-li v-for="item in items" :key="item.id" v-bind="item"></list-li>
I had the following in Vue 1.x
<tr v-for="product in products">
<td><img src="{{ product.image_url | thumbnail }}" class="thumbnail"></td>
</tr>
But in Vue 2 I tried:
<tr v-for="product in products">
<td><img :src="product.image_url | thumbnail" class="thumbnail"></td>
</tr>
and got "Property or method "thumbnail" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"
note: The regular mustache interpolation filter doesn't work when I'm assigning it to a property on a html element (ie: {{ data | filter }} works fine as plain text but not when trying to do src="{{ data | filter }}".
I tried a computed property but it didn't work as the element I'm trying to get a computed value is each element within an array (and I'm looping through each element in the array).
All thumbnail does is do some regex and fancy text replacement. Not sure the best way to do this in vue2.
Vue.js 2.0
Filters can now only be used inside text interpolations ({{}} tags). In the past we've found using filters with directives such as v-model, v-on etc. led to more complexity than convenience, and for list filtering on v-for it is more appropriate to move that logic into JavaScript as computed properties.
Using computed property:
new Vue({
el: '#app',
data: {
products: [],
},
computed: {
filterProducts() {
return this.products.filter(function(product) {
...
})
}
}
})
Vue.js expects you to define your filters before you use them in templates. Here is an example of how you would define a date formatting filter:
// Define the date time format filter
Vue.filter("formatDate", function(date) {
return moment(date).format("MMMM D, YYYY")
})
Once you have that, you are allowed to use it in code as follows:
<div class="due-date">{{dueDate | formatDate}}</div>
Can you tell me what the thumbnail filter is supposed to do? For images, I don't think there is any processing you can do on the client side. You can show thumbnails in some pre-defined size, which is something you would do in CSS, not using filters.