我在VueJS中有一个探索页面（见下文），其中包含一个名为toggle-tiles的子组件，这些组件就像网格一样。我想要做的是当其中一个＆＃34;切换瓷砖＆＃34;单击它已应用一个活动类，您可以从我下面的代码中看到，但我遇到了问题。
如果有一个活跃的类，我希望其余的都删除活动类。因此，任何时候只能有一个活跃。目前，当我点击时，它们都会激活。
请参阅下面的代码。
<template>
<div>
<section class="explore">
<div class="explore__banner">
<img src="/static/img/placeholder-banner.jpg" alt="" />
</div>
<div class="in">
<div class="explore__intro">
<div class="in">
<h2 class="heading heading--uppercase heading--borderbottom">EXPLORE</h2>
<p>Once-in-a-lifetime experiences, art exhibitions, culinary adventures and family fun. Stay inspired and discover
your own Algarve.</p>
</div>
</div>
<div class="explore__filters">
<div class="in">
<ul class="list list--inline list--uppercase">
<li>
<a href="#">all</a>
</li>
<li>
<a href="#">experiences</a>
</li>
<li>
<a href="#">what's on</a>
</li>
<li>
<a href="#">family</a>
</li>
<li>
<a href="#">food</a>
</li>
<li>
<a href="#">hotel amenities</a>
</li>
</ul>
</div>
</div>
<div class="explore__blocks">
<div class="in">
<toggle-tile @toggle-active="toggleTile" :showtile="isActive"></toggle-tile>
<toggle-tile @toggle-active="toggleTile" :showtile="isActive"></toggle-tile>
<toggle-tile @toggle-active="toggleTile" :showtile="isActive"></toggle-tile>
</div>
</div>
</div>
</section>
<room-builder></room-builder>
<offer-carousel :offers="offers"></offer-carousel>
</div>
</template>
<script>
import OfferCarousel from '@/components/OfferCarousel'
import RoomBuilder from '@/components/RoomBuilder'
import ToggleTile from '@/components/ToggleTile'
export default {
name: "Explore",
components: {
'offer-carousel': OfferCarousel,
'room-builder': RoomBuilder,
'toggle-tile': ToggleTile,
},
data() {
return {
isActive: false,
offers: [{
image: '/static/img/placeholder-offer.jpg',
active: true,
captionText: 'SPECIAL OFFER HEADING',
buttonText: 'read more',
buttonUrl: '#',
opacity: 1,
id: 1
},
{
image: '/static/img/placeholder-offer.jpg',
active: false,
captionText: 'SPECIAL OFFER HEADING',
buttonText: 'read more',
buttonUrl: '#',
opacity: 0,
id: 2
}
]
}
},
methods: {
toggleTile: function () {
console.log("clicked");
}
}
}
</script>
<template>
<div class="block" v-on:click="toggleState" v-bind:class="{active: showBlock }">
<div class="in">
<div class="block__image">
<img src="/static/img/block-placeholder.jpg" alt="" />
<div class="block__image--hover">
<img src="/static/img/svg/open.svg" alt="" />
</div>
</div>
<div class="block__title">
<div class="in">
<h6 class="heading heading--uppercase">EXPERIENCES</h6>
<h3>SUMMER TREATMENTS AT CONRAD SPA</h3>
</div>
</div>
</div>
<div class="block__panel">
<div class="in">
<div class="panel__close">
<img src="/static/img/svg/cross.svg" alt="" />
</div>
<div class="panel__gallery">
<basic-carousel :images="images"></basic-carousel>
</div>
<div class="panel__content">
<h6 class="heading heading--uppercase">RIA FORMOSA NATURAL PARK</h6>
<p>Spend the day with a local clam picker. A real life adventure on a traditional fisherman’s wooden boat, discovering
ancient clam picking secrets. You’ll also visit an oyster bank with oyster degustation and local sparkling wine.
</p>
<h6 class="heading heading--uppercase">WHEN?</h6>
<p>Daily, depending on the tide. Check when booking.
</p>
<h6 class="heading heading--uppercase">HOW LONG WILL IT TAKE?
</h6>
<p>Approximately 3 hours including transfer time.</p>
<h6 class="heading heading--uppercase">HOW MUCH WILL IT COST?</h6>
<p>€250,00 for up to 4 guests. €50 per additional guest. Free for children up to 6 years old. Maximum 12 guests. Return
transfers to Faro beach: €62.50 for up to four guests. €87.50 for 5-8 guests. Must be booked in advance.
</p>
<h6 class="heading heading--uppercase">WHAT’S INCLUDED?</h6>
<p>Clam picking equipment, waterproof boots (on request, depending on sizes), oyster tasting & sparkling wine. Don’t
forget to bring sunscreen, swimming costumes and flip flops.
</p>
</div>
</div>
</div>
</div>
</template>
<script>
import BasicCarousel from '@/components/BasicCarousel'
export default {
name: 'ToggleTile',
components: {
'basic-carousel': BasicCarousel,
},
props: ['showtile'],
data() {
return {
showBlock: false,
images: [{
image: '/static/img/meetings-slide.jpg',
active: true,
opacity: 1,
id: 1
},
{
image: '/static/img/meetings-slide.jpg',
active: false,
opacity: 0,
id: 2
}
],
}
},
methods: {
toggleState: function () {
this.$emit('toggle-active');
this.showBlock = this.showtile;
this.showBlock = true;
}
}
}
</script>
由于
答案 0 :(得分：0)
Vue闪耀的地方。为此，您需要识别您的瓷砖，以便您知道哪一个是活动的。可以将一个瓷砖与另一个瓷砖区分开来的东西。
我能看到这个问题的最好方法是。最好不要在isActive: false中使用Explore，而是activeTile: 1或activeTile: 'FooTile'以及ToggleTile的道具（ID或名称，以此示例，但可能是任何事情）
在你的ToggleTile组件中，使用该道具发出事件，如：
this.$emit('toggle-active', this.name)
or
this.$emit('toggle-active', this.id)
返回Explore更改toggleTile功能
toggleTile: function (nameOrId) {
this.activeTile = nameOrId
}
<toggle-tile @toggle-active="toggleTile" :showtile="activeTile === 'FooTile'"></toggle-tile>
<toggle-tile @toggle-active="toggleTile" :showtile="activeTile === 1"></toggle-tile>
＆＃34;魔法＆＃34;这是因为只要activeTile更改，道具showTile会更改，显示活动图块并隐藏其他图块。
这是在Vue中开发时的常见思考方式。说这个条件是真的，而不是在点击或JQuery之类的东西时进行更改。