0👍
That is because you are rendering all the moreinfo from all the locations in your <p> tag. What you can do is actually to declare a new data entry, say locationMoreInfo, and overwrite it on the click event.
Your markup will look something like this:
<p v-if="locationMoreInfo" v-html="locationMoreInfo"></p>
And in your VueJS logic, remember to declare locationMoreInfo: null in your data object. Whenever the click handler is called, you simply updated it:
moreinfo2(location) {
if (!this.selected) {
this.locationMoreInfo = location.moreinfo;
} else {
this.locationMoreInfo = null;
}
}
See proof-of-concept below:
const app = new Vue({
el: '#test',
data: {
moreinfo: false,
locationMoreInfo: null,
locations: [{
name: "Europe",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "img/europe.jpg",
moreinfo: "adassaad"
},
{
name: "America",
desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
moreinfo: "adasdasdassaad"
},
{
name: "Scotland",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
moreinfo: "adad"
},
],
selected: null,
},
methods: {
moreinfo2(location) {
if (!this.selected) {
this.locationMoreInfo = location.moreinfo;
} else {
this.locationMoreInfo = null;
}
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="test">
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
<p v-if="locationMoreInfo" v-html="locationMoreInfo"></p>
</div>
<div id="location-box">
<!-- Root element for your Vue app -->
<div v-for="location in locations" class="location-box" v-bind:style="{ background: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) ),url(' + location.img + ')' }" @click="moreinfo2(location)">
<h4>{{location.name}}</h4>
<p>{{location.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>0👍
There’s no need to use two flags here – one for ‘moreInfo’, another for ‘selected’. Use one only and set it when location is chosen:
const app = new Vue({
el: '#test',
data: {
selectedLocation: null,
locations: [
{
name: "Europe",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "img/europe.jpg",
moreinfo: "Europe MoreInfo"
},
{
name: "America",
desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
moreinfo: "America MoreInfo"
},
{
name: "Scotland",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
moreinfo: "Scotland MoreInfo"
},
],
},
methods:{
moreinfo2(location) {
this.selectedLocation = location;
},
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="test">
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
<p v-for="location in locations" v-if="location === selectedLocation">{{location.moreinfo}}</p>
</div>
<div id="location-box">
<div v-for="location in locations" class="location-box" v-bind:style="{ background: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) ),url(' + location.img + ')' }" @click="moreinfo2(location)">
<h4>{{location.name}}</h4>
<p>{{location.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>0👍
You have data array so you can’t control by just true / false data ! Also I suggest you to use :key in v-for . Below I pass loop key as param and control that param in selected data for info text display …
const app = new Vue({
el: '#test',
data: {
selected: null,
locations: [
{
name: "Europe",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "img/europe.jpg",
moreinfo: "adassaad"
},
{
name: "America",
desc: "Curabitur vel lacus ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ex ante, scelerisque vitae semper ut",
img: "https://images.fineartamerica.com/images-medium-large-5/14-american-flag-les-cunliffe.jpg",
moreinfo: "adasdasdassaad"
},
{
name: "Scotland",
desc: "Phasellus non pulvinar elit. Etiam id fringilla eros. Mauris mi odio, fringilla eget tempus eu, vehicula nec neque.",
img: "https://images-na.ssl-images-amazon.com/images/I/41VvuLQ7UhL.jpg",
moreinfo: "adad"
},
],
},
methods:{
moreinfo2(key) {
this.selected = key
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="test">
<div id="location-section">
<div class="main-container">
<div class="location-grid-container">
<div id="info-box" class="outline">
<p v-for="(location,key) in locations" :key="key" v-if="selected == key">{{location.moreinfo}}</p>
</div>
<div id="location-box"><!-- Root element for your Vue app -->
<div v-for="(location,key) in locations" :key="key" class="location-box" v-bind:style="{ background: 'linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1) ),url(' + location.img + ')' }" @click="moreinfo2(key)">
<h4>{{location.name}}</h4>
<p>{{location.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>Source:stackexchange.com