v-for 和 v-if 列出了所有单击的数组，应该列出单击的唯一数组的信息

Question

我有一个充满位置的数组。有 2 个div，一个div 包含位置，另一个显示有关 CLICKED 位置的更多信息。

当我单击该位置(例如苏格兰(而不是列出苏格兰的"更多信息"信息并且仅列出苏格兰的"更多信息"信息时，它会列出所有 3 个"更多信息"标签。我该如何解决这个问题？

.HTML：

<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="moreinfo">{{location.moreinfo}}</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>

Vue.js

const app = new Vue({
el: '#test',
data: {
moreinfo: false,
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.moreinfo = true;
} else {
this.moreinfo=false;
}
},
}
})

Answer 1

这是因为您正在渲染<p>标记中所有位置的所有moreinfo。您实际上可以做的是声明一个新的数据条目，例如locationMoreInfo，并在单击事件上覆盖它。

您的标记将如下所示：

<p v-if="locationMoreInfo" v-html="locationMoreInfo"></p>

在你的 VueJS 逻辑中，记得在你的data对象中声明locationMoreInfo: null。每当调用单击处理程序时，只需更新它：

moreinfo2(location) {
if (!this.selected) {
this.locationMoreInfo = location.moreinfo;
} else {
this.locationMoreInfo = null;
}
}

请参阅下面的概念验证：

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>

Answer 2

这里不需要使用两个标志 - 一个用于"更多信息"，另一个用于"选定"。仅使用一个并在选择位置时进行设置：

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>

Answer 3

你有数据数组，所以你不能只通过true / false数据来控制！另外，我建议您在v-for中使用:key。下面我将loop key作为参数传递，并在selected数据中控制该参数以进行信息文本显示......

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>