i'm trying to change the background color using for loop, first row should be white while second row show be grey , but it keeps returning just the grey background on each row
here's my code
<div
class="
row
margin-top-4 margin-botton-4 margin-top-md-10 margin-bottom-10
"
:class="order % 2 === 0 ? 'bg-white' : 'bg-light-grey'"
#click="navigateToOrderDetails(order)"
v-for="order in allOrders"
:key="order._id"
>
{{ order.description }}
</div>
please how can i go about this
As order is an object, order % 2 === 0 will always return false and it applied the else class which is bg-light-grey.
You should apply condition on the iteration index. Change your logic to :
<div
v-for="(order, index) in allOrders"
:class="index % 2 === 0 ? 'bg-white' : 'bg-light-grey'"
:key="index"
>
{{ order.description }}
</div>
Related
I have a data table and when I render those records on the website, I will add ids to the elements, each element is a different id(id="item-first"), so what to do?
<div class="" v-for="(item, index) in producthots" :key="index">
<div
:class="
index % 2 == 0 ? 'product-item row-reverse' : 'product-item'
"
>
I want when rendered, each element will have an id object
for adding id you can bind it as like as :src and :class, it would be like this :id look at the example below:
<div :id="'CollapseState' + index" aria-expanded="false"
class="ChangeState bg-white collapse"></div>
I binded the id and also for making it uniq I added + index end of it so the short answer is below code:
:id="'CollapseState' + index"
I am trying to create pagination component. For e.g if my API returns "pages": 9
For example, if I have 9 pages, I want to cut the list at 5 and add three dots like on the image. I want to be able to provide at which index I can cut the list. Whats the best way to do this? I am approaching this wrong?
<div v-for="index in pages" class="flex">
<button>{{index}}</button>
</div>
Assuming you receive cutIndex and apiPages as props to your component, then your template could look something like the following:
<div v-for="page in Math.min(cutIndex, apiPages)" class="flex">
<button>{{page}}</button>
</div>
<template v-if="cutIndex < apiPages">
<div class="flex">
<button>...</button>
</div>
<div class="flex">
<button>{{apiPages}}</button>
</div>
</template>
this code works for me, and here is the key part
<template>
...
<template v-for="index in pages"
v-if="(index < 4 || (length - index) < 3) || Math.abs(index - value) < 2">
<span v-if="index === (length - 2) && value < (length - 4)">
...
</span>
<button #click.prevent="updatePage(index)">
{{ index }}
</button>
<span v-if="(index === 3 && value > 5)">
...
</span>
</template>
...
</template>
the result:
<template>
<nav class="flex items-center justify-center" role="pagination">
<!-- go to previous page -->
<a :key="`${$route.name}-arrow-${value > 1 ? value - 1 : 1}`"
:href="getFullPath(value > 1 ? value - 1 : 1)"
:title="$t('previous_page')"
#click.prevent="updatePage(value > 1 ? value - 1 : 1)"
:disabled="value === 1"
class="arrow pop-btn default rounded-sm"
v-waves>
<i class="mdi-chevron-left mdi"></i>
</a>
<template v-for="index in length"
v-if="(index < 4 || (length - index) < 3) || Math.abs(index - value) < 2">
<span v-if="index === (length - 2) && value < (length - 4)">
...
</span>
<a :href="getFullPath(index)"
:title="$t('page_index', {index: index})"
#click.prevent="updatePage(index)"
class="pop-btn number default rounded-sm"
:class="{
'active': index === value
}"
v-waves>
{{ index }}
</a>
<span v-if="(index === 3 && value > 5)">
...
</span>
</template>
<!-- go to next page -->
<a :href="getFullPath(value === length ? value : value + 1)"
:title="$t('next_page')"
#click.prevent="updatePage(value === length ? value : value + 1)"
:disabled="value === length"
class="arrow pop-btn default rounded-sm"
v-waves>
<i class="mdi-chevron-right mdi"></i>
</a>
</nav>
</template>
<script type="text/javascript">
export default{
emits: ['update:value],
props: {
length: {
required: true,
type: Number
},
// the page filter
value: {
required: true,
type: Number
}
},
methods: {
updatePage(index){
this.$emit('update:value', index);
},
getFullPath(page){
let query = {...this.$route.query};
page === 1 ? delete query.page : query.page = page;
return this.$router.resolve(
this.r({
query: query,
name: this.$route.name,
params: this.$route.params
})
).href;
}
}
}
</script>
by the way, <a> may better than <button> for SEO
I want to change to color of my element each time it clicks the element, (to show start, in-progress and finished). For this I made a variable and increasing its value each time user clicks it and then applying different classes for styling.
<div v-for="error in errors" :key="error" class="element" > <span #click="modify()"> {{error}}</span></div>
I declare a variable step in data
modify () {
step = step + 1
}
now I want to change styling base of this step (1, 2, 3).
Any idea, how can I do this?
you can try :
<div class="element" v-for="error in errors" :key="error" :class="step==1 ? 'class1' :
step==2 ? 'class2':'class3'">
....
</div>
I would suggest an approach like this:
<div v-for="error in errors" :key="error" :class="`class_${step}`" >
<span #click="modify()"> {{error}}</span>
</div>
Or if you don't want to name your classes that way:
<div v-for="error in errors" :key="error" :class="getClass" >
<span #click="modify()"> {{error}}</span>
</div>
...
methods: {
getClass() {
if (this.step === 1) return 'classA';
if (this.step === 2) return 'classB';
// etc.
}
}
<transition-group appear name="fade" class="row no-gutters" v-if="currentTab === 'living'">
<div class="col-6 pr-3 pb-3" :class="[ isEven(index) ? 'col-md-8' : 'col-md-4']" v-for="(item, index) in livingGallery" :key="'living' + index">
<img :src="item.photoThumbSmall" alt="Gallery Photo index" class="d-block w-100">
</div>
</transition-group>
This is the code for isEvent:
methods: {
isEven(i) {
return i / 2 === 0;
}
},
I need to render the div different based on the index. div with even index gets the class col-md-8, otherwise col-md-4.
This is what I expected from the code:
index 0 => col-md-8
index 1 => col-md-4
index 2 => col-md-8
......
However, only the first element has col-md-8. The remaining elements are assigned col-md-4.
What's the problem?
You want to do i modulus 2, not divided by 2.
isEven(i) {
return i % 2 === 0;
}
i / 2 will only ever be 0 if i is 0. Since you want to know whether the given index is even, you should check the remainder of the division, which is what the modulus operation returns.
New to vuejs and I would like to be able to output something like
<div>
<span>
item 1
item 2
</span>
<span>
item 3
item 4
</span>
</div>
I have tried with the following but doesn't seem to work. I think th issue is the <span> tag and straight text works fine. How would I make Vuejs output a span or is there a different way to achieve this?
<div v-for="(item,idx) in selectedItems">
<span v-if="(idx % 2) == 0" v-html="rawHtml"><span></span>
{{item.display_name}}
<span v-if="((idx-1) % 2) == 0" v-html="rawHtml"></span></span>
</div>
Try next variant:
<div>
<span v-for="(item, idx) in selectedItems"
v-if="idx % 2 === 0">
<p>{{item.display_name}}</p>
<p v-if="selectedItems[idx + 1]">{{selectedItems[idx + 1].display_name}}</p>
</span>
</div>