Блог

У меня есть 1 компонент, PriceButton, который будет отображаться на экране 4 раза. Я хочу, чтобы одновременно выделялся только 1, и если выбран другой, проверьте другие копии компонента и удалите активное состояние, если оно существует.

Позвольте мне предисловие, я довольно новичок в Vue/Nuxt. В настоящее время, если я выберу один из них, состояние не зависит от других компонентов, поэтому он не удалит «активный» класс, когда я нажму на другой компонент.

Ищу предложения о том, как лучше всего справиться с этим сценарием.

Компонент My PriceButton отслеживает активное состояние

 <template>
    <div class="tw-cursor-pointer align-end tw-select-none" 
    @click.prevent="isActive = !isActive"
    :class="[!isActive ? '' : 'active']">
    
        <div
            class="tw-flex tw-flex-col tw-border-2 tw-border-max-grey-2 tw-items-center tw-rounded price-container"
        >
        <div
     v-if="popular"
            class="popular tw-uppercase tw-text-xs tw-whitespace-no-wrap tw-bg-max-grey-2 tw-text-white tw-w-full tw-text-center"
        >
            Most Popular
        </div>
            <p class="tw-font-bold tw-whitespace-no-wrap tw-mx-5">
                {{ title }}
            </p>
            <p
                class="tw-text-max-grey-2 tw-font-bold tw-mx-5 tw-mt-2 price-container"
            >
                {{ price }}
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PriceButton',
    props: ['price', 'title', 'popular'],
    data() {
        return {
            isActive: false,
        }
    }
};
 

Страница, на которой я использую компонент в

 <template>
<div class="grid-container">
              <PriceButton title="1 Device" price="$125/ea" cost=125
               @click.native="swapPricing(174.99, 124.99, 50, 1)"/>
              <PriceButton title="2 Devices" price="$112/ea" cost=224
               @click.native="swapPricing(349.99, 224.99, 125, 2)"/>
              <PriceButton title="3 Devices" price="$108/ea" cost=324
               @click.native="swapPricing(524.99, 324.99, 200, 3)" :popular="true" />
              <PriceButton title="4 Devices" price="$87/ea" cost=348 
              @click.native="swapPricing(699.99, 349.99, 350, 4)"/>
            </div>
    </template>
        export default {
  name: "Buy",
  components: {
    Modal
  },
  data() {
    return {
      totalPrice: 524.99,
      salePrice: 324.99,
      savings: 200,
      pods: 18
    };
  },
  methods: {
      swapPricing (price, sale, saving, devices) {
        this.totalPrice = price;
        this.salePrice = sale;
        this.savings = saving;
        this.pods = devices * 6;
      }