This is my data, initially I want show only 4 albums on the page, then when a user click on Show More I want to load the next 4 albums. And when user click on the Show Less button, it goes back to the previous/initial state.
cardData: [
{
id: 1,
img: eight0eightheartbreak,
title: '808 & Heartbreak',
desc: 'desc 1'
},
{
id: 2,
img: collegedropout,
title: 'College Dropout',
desc: 'desc 2'
},
{
id: 3,
img: graduation,
title: 'Graduation',
desc: 'desc 3'
},
{
id: 4,
img: lateregistration,
title: 'Late Registration',
desc: 'desc 4'
},
{
id: 5,
img: MBDTF,
title: 'My Beatiful Dark Twisted Fantesy',
desc: 'desc 5'
},
{
id: 6,
img: TLOP,
title: 'The Life of Pablo',
desc: 'desc 6'
},
{
id: 7,
img: Ye,
title: 'Ye',
desc: 'desc 7'
},
{
id: 8,
img: yeezus,
title: 'Yeezus',
desc: 'desc 8'
},
{
id: 9,
img: JIK,
title: 'Jesus Is King',
desc: 'desc 9'
}
]
}
this is my code
const [readMore, setReadMore] = useState(false);
const [noOfElements, setnoOfElements] = useState(4);
const slice = Data.cardData.slice(0, noOfElements);
const loadMore = ()=>{
setnoOfElements(noOfElements + 4)
}
return (
<section className="py-4 container">
<div className="row justify-content-center">
{slice.map((item, index)=>{
return(
<div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">
<div className="card p-0 overflow-hidden h-100 shadow">
<img src={item.img} alt="" className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.desc}</p>
</div>
</div>
</div>
)
})}
</div>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadMore()} >
Read more
</button>
</section>
)
}
I have managed to create a Show more button, now how do I create Show Less button using the same logic, react useState hook? I know how to make it using component, but I want to do it using useState, is there anyway I can do it?
You can just put a conditional tag in your slice.map:
{slice.map((item, index)=>{
if( index <= noOfElements ){
return <div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">...</div>
}
}
const [readMore, setReadMore] = useState(false);
const [noOfElements, setnoOfElements] = useState(4);
const slice = Data.cardData.slice(0, noOfElements);
const loadMore = ()=>{
setnoOfElements(noOfElements + 4)
}
const loadLess = ()=>{
setnoOfElements(noOfElements - 4)
}
return (
<section className="py-4 container">
<div className="row justify-content-center">
{slice.map((item, index)=>{
return(
<div className= "col-11 col-md-6 col-lg-3 max-0 mb-4">
<div className="card p-0 overflow-hidden h-100 shadow">
<img src={item.img} alt="" className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.desc}</p>
</div>
</div>
</div>
)
})}
</div>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadMore()} >
Read more
</button>
<button className="btn btn-dark d-block-w-100" onClick={()=>loadLess()} >
Read less
</button>
</section>
)
Is this is you actually needed?
Related
The follwing is the code I've written and when I rendered it, item.about which has <a> tag, cannot render it and [object Object] is being displayed instead of that JSX. JSON.stringify does not even render it.
export default function Team() {
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about:
"He created Zoom Church LK </a>}. Apart from shipping apps, He Writes/Produces/Performs Music.",
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about:
`He created ${ Zoom Church LK }. Apart from shipping apps, He Writes/Produces/Performs Music.`,
},
];
return (
<section className="leading-relaxed max-w-screen-xl mt-12 mx-auto px-4 lg:px-8 mb-20">
<div className="space-y-3 text-center">
<h1 className="text-5xl text-gray-400 font-black">Meet Our Team</h1>
<p className="text-gray-500 max-w-lg mx-auto text-lg">
Focused. Improving. Data-driven.
</p>
</div>
<div className="mt-14 gap-4 sm:grid sm:grid-cols-2 lg:grid-cols-3">
{teamList.map((item) => (
<div className="space-y-3 mt-5" key={item.id}>
<div className="object-center lg:w-full rounded-lg card-zoom">
<img
src={item.image}
alt={item.name}
/>
</div>
<h4 className="text-xl text-gray-400 font-bold">{item.name}</h4>
<h5 className="text-lg text-gray-400 font-medium">
{item.designation}
</h5>
<p className="text-gray-500">{(JSON.stringify(item.about))}</p>
</div>
))}
</div>
</section>
);
}
What would be the best way to modify my component to be able to add links like this?
To render links change your teamList like this:-
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about: <>He created Zoom Church LK . Apart from shipping apps, He Writes/Produces/Performs Music.</>,
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about: <>He created Zoom Church LK . Apart from shipping apps, He Writes/Produces/Performs Music.</>,
},
];
and then render it like this
<p className="text-gray-500">{item.about}</p>
// you have to use tags without ${} when
// you want to use them in strings
const teamList = [
{
id: 1,
name: "User",
image: user,
designation: "User",
about:
"He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.",
},
{
id: 2,
name: "User 2",
image: user,
designation: "User",
about:
`He created <a href='https://hanancs.github.io/ZoomChurchLK'> Zoom Church LK </a>. Apart from shipping apps, He Writes/Produces/Performs Music.`,
},
];
// you can use dangerouslySetInnerHTML to show
//html tag inside of strings.
return (
{teamList.map((team) => (
<div dangerouslySetInnerHTML={{ __html: team.about }} key={team.id} />
))}
)
I'm trying to add functionality to my addToCart button located in ProductCard. I need it to be disabled once the cupcake has been added to my cart array. When removed via the removeItem/ clearCart in MiniCart I need the button to be enabled again. I've tried if else statements and tried adding all kinds of functionality that I've Google's but have yet to succeed. I'd really appreciate some help ^^
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
cart: [],
cupcake: [{
title: 'Cream',
price: 12.99,
image: 'https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
id: 1,
quantity: 1
},
{
title: 'Choc',
price: 10.99,
image: 'https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
id: 2,
quantity: 1
},
{
title: 'Frosting',
price: 14.99,
image: 'https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
id: 3,
quantity: 1
},
{
title: 'Berry',
price: 9.99,
image: 'https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
id: 4,
quantity: 1
},
{
title: 'Deluxe',
price: 19.99,
image: 'https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
id: 5,
quantity: 1
},
{
title: 'Oreo',
price: 19.99,
image: 'https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
id: 6,
quantity: 1
},
]
},
});
ProductCard.vue
<template>
<ul
class="
px-32
py-16
grid
row-auto
gap-10
grid-cols-1
md:grid-cols-2
xl:grid-cols-3
2xl:grid-cols-4
"
>
<li
class="bg-white rounded-lg"
v-for="cupcakes in cupcake"
:key="cupcakes.id"
>
<img
class="rounded-md w-screen object-cover max-h-60"
:src="cupcakes.image"
/>
<div class="py-2 px-8 text-gray-600">
<span class="px-10 text-xl font-bold"> {{ cupcakes.title }}</span>
<span class="px-10 text-xl font-bold">${{ cupcakes.price }}</span>
<button
class="
bg-purple-200
font-bold
px-3
mt-2
text-xl
py-4
mb-4
w-full
rounded-md
transition-all
hover:bg-purple-300
"
type="button"
v-on:click="addToCart(cupcakes)"
>
Add to Cart
</button>
</div>
</li>
</ul>
</template>
<script>
export default {
computed: {
cupcake() {
return this.$store.state.cupcake;
},
},
methods: {
addToCart(cupcakes) {
this.$store.state.cart.push({
title: cupcakes.title,
price: cupcakes.price,
image: cupcakes.image,
id: cupcakes.id,
quantity: cupcakes.quantity,
});
},
},
};
</script>
Minicart.vue
<template>
<div class="bg-white border-2 border-gray-500 rounded-md absolute right-16">
<div
class="grid grid-cols-2 gap-20 m-5"
v-for="carts in cart"
:key="carts.id"
>
<img class="w-24" :src="carts.image" alt="" />
<div class="grid grid-rows-3">
<strong class="tracking-wider font-bold">{{ carts.title }}</strong>
<p class="tracking-wider font-bold">
{{ carts.quantity }} x ${{ carts.price }}
</p>
<button
class="bg-gray-500 rounded p-2 tracking-wider font-bold text-white"
v-on:click="removeItem(carts)"
>
remove
</button>
<button type="button" v-on:click="increase(carts)">Increase</button>
<button type="button" v-on:click="deccrease(carts)">Deccrease</button>
</div>
</div>
<div class="flex mx-5 my-8 justify-between">
<span
class="tracking-wider text-xl p-4 font-bold justify-center align-middle"
>Total: ${{ total }}</span
>
<button
v-on:click="clearCart"
type="button"
href=""
class="
bg-red-400
p-4
rounded
tracking-wider
text-white text-xl
font-bold
"
>
Clear Cart
</button>
</div>
</div>
</template>
<script>
export default {
computed: {
cart() {
return this.$store.state.cart;
},
total: function () {
let total = 0;
for (let carts of this.$store.state.cart) {
total += carts.price * carts.quantity;
}
return total.toFixed(2);
},
},
methods: {
removeItem: function (carts) {
this.$store.state.cart.splice(carts, 1);
},
increase: function (carts) {
carts.quantity += 1;
},
deccrease: function (carts) {
if (carts.quantity > 1) {
carts.quantity -= 1;
} else {
this.$store.state.cart.splice(carts, 1);
}
},
clearCart: function () {
let length = this.$store.state.cart.length;
this.$store.state.cart.splice(0, length);
console.log(length);
},
},
};
</script>
Just like that. Demo https://codesandbox.io/s/jolly-shirley-dgg10
Template:
<button
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 mb-4 w-full
rounded-md transition-all hover:bg-purple-300"
type="button"
v-on:click="addToCart(cupcakes)"
:disabled="checkCart(cupcakes.id)"
>
Add to Cart
</button>
Methods:
checkCart(id) {
return this.$store.state.cart.find((item) => item.id === id);
},
If you add this disabled-method to your button, it will be disabled, if the cupcake is already in the cart, and you can still add the other cupcakes:
<button
class="
...
"
type="button"
v-on:click="addToCart(cupcakes)"
:disabled="{ cart.includes(cupcakes) }"
>
Add to Cart
</button>
Your AddToCart-function could also be rewritten to:
addToCart(cupcakes) {
this.$store.state.cart.push(cupcakes);
},
I have a navbar that displays values depending on selected tabs
Now I want to do exactly the same in mobile view, for that, I have a select menu instead navbar
But value is not changing
But values are not changing when I select different value, what am I doing wrong? Regards
CodePen
Code:
<template>
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
<option v-for="tab in tabs" :key="tab.name" :selected="tab.current">{{ tab.name }}</option>
</select>
<div >
<div v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
{{ tab.id }} - {{ tab.name }} - {{ tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
</div>
</div>
</div>
<div class="hidden sm:block">
<nav class="flex space-x-4 " aria-label="Tabs" >
<a v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" :class="[tab.current ? 'bg-purple-700 text-white' : 'text-purple-700 hover:text-gray-700', 'px-12 py-2 font-medium text-sm rounded-full font-bold text-lg']" >
{{ tab.name }}
</a>
</nav>
</div>
<div class="hidden sm:block">
<div v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
{{ tab.id }} - {{ tab.name }} - {{ tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const tabs = ref([
{ id: 1 , title: 'test title one', imageSrc:'/programs/test1.png' , content: '', name: 'LOREM', href: '#test1', current: true },
{ id: 2 , title: 'test title two', imageSrc:'/programs/test2.png', content: '', name: 'IPSUM', href: '#test2', current: false },
{ id: 3 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 4 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 5 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 6 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
])
const changeTab = (selectedTab) => {
tabs.value.map(t => {
t.id === selectedTab.id ? t.current = true : t.current = false
});
}
return { tabs, changeTab }
},
computed: {
img() {
return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
},
},
}
</script>
<style lang="scss" scoped>
nav {
display: flex;
gap: 20px;
background: #E5E5E5;
border-radius: 20px;
width: 100%;
justify-content: space-between;
}
</style>
Your <select> tag has no binding. Usually you should have a v-bind or at least a change handler to update the data.
Your change handler could look like this:
<select
#change="changeTab($event.target.value)"
>
...
</select>
I'm trying to render objects that are in an array into my DOM.
I'm trying to display each object in its own card for viewing (using Tailwind css).
I'm fairly new to coding so I feel like it's something very simple that I'm overlooking here. Any help would be greatly aprpeciated!
const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach(() => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${itemObject.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${itemObject.title}</h3>
<p class="text-right">$${itemObject.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}
You can use for loop, or even forEach() create Element, it doesn't matter it will be div, span, h1 or what and use innerText to declare your object names as text, and call your DOM Element before you use for loop and append them as child in your Element via .appendChild
In that case I used template strings it is easier to use, when you have to append lot of data from object
For Loop
const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
for(let i = 0; i < data.length; i++){
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const list = document.createElement("p")
list.innerText = `${data[i].name}: ${data[i].age}`
usersBox.appendChild(list)
container.appendChild(usersBox)
}
.usersBox{
display: flex;
border: 2px solid black
}
<div class="container">
</div>
.forEach()
const container = document.querySelector(".container")
const data = [
{name: "george", age: 12},
{name: "Maria", age: 35},
{name: "Lucas", age: 65}
]
data.forEach(users => {
const usersBox = document.createElement("div")
usersBox.className = "usersBox"
const list = document.createElement("p")
list.innerText = `${users.name}: ${users.age}`
usersBox.appendChild(list)
container.appendChild(usersBox)
})
.usersBox{
display: flex;
border: 2px solid black;
}
<div class="container">
</div>
You forgot to "capture" each element in your array inside forEach function:
itemObject.forEach((item) => {
Once that's done, you can use item instead of itemObject inside your template. Also ID must be unique, so you can capture index of current item in the array as well and use it in your template:
itemObject.forEach((item, index) => {
const productsDOM = document.querySelector(`.products`);
const itemObject = [{
title: "Chocolate",
price: 10.99,
id: 1,
img: "https://images.pexels.com/photos/1055272/pexels-photo-1055272.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Whipped Cream",
price: 12.99,
id: 2,
img: "https://images.pexels.com/photos/1055270/pexels-photo-1055270.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}, {
title: "White Frosting",
price: 12.99,
id: 3,
img: "https://images.pexels.com/photos/1055271/pexels-photo-1055271.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Berry",
price: 14.99,
id: 4,
img: "https://images.pexels.com/photos/3081657/pexels-photo-3081657.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Deluxe",
price: 19.99,
id: 5,
img: "https://images.pexels.com/photos/1998634/pexels-photo-1998634.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}, {
title: "Oreo",
price: 14.99,
id: 6,
img: "https://images.pexels.com/photos/783274/pexels-photo-783274.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
}];
function displayProducts() {
let html = ``;
itemObject.forEach((item,index) => {
html += `
<div id="item-${index}" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${item.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${item.title}</h3>
<p class="text-right">$${item.price}</p>
</div>
<button data-id=${item.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}
displayProducts();
<div class="products"></div>
you have problem in your forEach loop, try this :
function displayProducts() {
let html = ``;
itemObject.forEach((el) => {
html += `
<div id="item-1" class="bg-white rounded-lg">
<img class="rounded-md w-screen object-cover max-h-60"
src="${el.img}"
alt="">
<div class="py-2 px-8 text-gray-600">
<div class="grid grid-cols-2 py-3 text-xl font-bold ">
<h3>${el.title}</h3>
<p class="text-right">$${el.price}</p>
</div>
<button data-id=${itemObject.id}
class="bg-purple-200 font-bold px-3 mt-2 text-xl py-4 w-full rounded-md transition-all hover:bg-purple-300">Purchase</button>
</div>
</div>
`;
});
productsDOM.innerHTML = html;
}
I have a list of people when clicking on them is marked with a red border, I also have two buttons, I want to make it so that when one of these buttons is pressed, the red border disappears, that is, cancel the active class, since when one of these people is clicked, it is activated a class named selectAvatarBorder
You can also see the given code in codesandbox
<template>
<div>
<div class="avatars-mob-container">
<div class="avatars-container">
<div class="av-row">
<div
v-for="(chunk, index) in Math.ceil(usersGroup.length / 2)"
:key="index"
>
<div
v-for="(user, index) in usersGroup.slice(
(chunk - 1) * 2,
chunk * 2
)"
:key="index"
class="avatar-columns"
:class="{ selectAvatarBorder: selectedUsers === user.id }"
#click="setUserBorderColor(user.id)"
>
<div>
<img width="100" height="100" :src="user.img" alt="avatar" />
</div>
<div>
<p class="avatar-name">{{ user.name }} {{ index }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="users-btn-group">
<div style="margin-right: 10px">
<button
:class="{
firstBtnMobUsersColor: state === 1,
secondBtnMobUsersColor: state === 2,
}"
#click="setState(1)"
>
Other
</button>
</div>
<div>
<button
:class="{
firstBtnMobUsersColor: state === 2,
secondBtnMobUsersColor: state === 1,
}"
#click="setState(2)"
>
Open to All
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setState(s) {
this.state = s;
},
setUserBorderColor(s) {
this.selectedUsers = s;
},
},
data() {
return {
state: 0,
selectedUsers: 0,
usersGroup: [
{
id: 1,
name: "American Indian",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/1.png",
},
{
id: 2,
name: "Black/African Descent",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/2.png",
},
{
id: 3,
name: "Hispanic/Latino",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/3.png",
},
{
id: 4,
name: "White Caucasian",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/4.png",
},
],
};
},
};
</script>
<style scoped>
.selectAvatarBorder {
border: 2px solid #CC003D !important;
border-radius: 16px;
}
.firstBtnMobUsersColor {
background: #CC003D !important;
color: white !important;
}
.secondBtnMobUsersColor {
background: white !important;
color: red !important;
}
</style>
Something like this?
<template>
<div>
<div class="avatars-mob-container">
<div class="avatars-container">
<div class="av-row">
<div
v-for="(chunk, index) in Math.ceil(usersGroup.length / 2)"
:key="index"
>
<div
v-for="(user, index) in usersGroup.slice(
(chunk - 1) * 2,
chunk * 2
)"
:key="index"
class="avatar-columns"
:class="{ selectAvatarBorder: selectedUsers === user.id && isSelected }"
#click="setUserBorderColor(user.id)"
>
<div>
<img width="100" height="100" :src="user.img" alt="avatar" />
</div>
<div>
<p class="avatar-name">{{ user.name }} {{ index }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="users-btn-group">
<div style="margin-right: 10px">
<button
:class="{
firstBtnMobUsersColor: state === 1,
secondBtnMobUsersColor: state === 2,
}"
#click="setState(1)"
>
Other
</button>
</div>
<div>
<button
:class="{
firstBtnMobUsersColor: state === 2,
secondBtnMobUsersColor: state === 1,
}"
#click="setState(2)"
>
Open to All
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
setState(s) {
this.state = s;
this.isSelected = false;
},
setUserBorderColor(s) {
this.selectedUsers = s;
this.isSelected = true;
},
},
data() {
return {
state: 0,
selectedUsers: 0,
isSelected: false,
usersGroup: [
{
id: 1,
name: "American Indian",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/1.png",
},
{
id: 2,
name: "Black/African Descent",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/2.png",
},
{
id: 3,
name: "Hispanic/Latino",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/3.png",
},
{
id: 4,
name: "White Caucasian",
img:
"http://astragem.com/static/images/ClickSearchComponent/users/4.png",
},
],
};
},
};
</script>
As when you are clicking on image you are setting an index in the selectedUsers, so just add this.selectedUsers = 0; in the setState function.