在子组件VueJS之间切换活动类

Question

我在 VueJS 中有一个探索页面（见下文），其中包含称为切换磁贴的子组件，这些组件的布局类似于网格。我想要做的是，当单击这些“切换磁贴”之一时，它应用了一个活动类，您可以从下面的代码中看到，但我遇到了问题。

如果一个人有一个活跃的班级，我希望其他人的活跃班级被删除。所以任何时候只有一个可以激活。目前，当我点击时，它们都设置为活动状态。

请看下面我的代码。

<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>

谢谢

Answer 1

这就是 Vue 的亮点所在。为此，您需要标识您的磁贴，以便您知道当前哪个磁贴处于活动状态。可以将一块瓷砖与另一块区分开来的东西。

我能看到这个问题的最好方法是。与其在Explore 中使用isActive: false，不如在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>

这里的“魔力”在于，每当 activeTile 更改该道具时，showTile 将更改显示活动磁贴并隐藏其他磁贴。

这是在 Vue 中开发时的常见思考方式。说明该条件何时为真，而不是在单击或类似 JQuery 时进行更改。