Vue-切换按钮会影响所有切换按钮

Question

我有一个在Vue中创建的日历，并且在一周的每一天，都有一天的切换按钮。

只有第一天的切换按钮有效。如果我在其他任何一天切换按钮，则会影响第一个按钮。

有什么主意吗？

所以我切换第4天，但这会触发日历中第一天的切换。

<template>
  <td
    class="calendar__day-cell"
    :class="{
      'is-invalid-date' : day.date == false,
      'calendar__is-disabled-cell' : day.is_active == false || day.is_past == true,
      'is-today' : day.is_today,
      'is-past-today' : day.is_past == false,
      'is-past-today' : day.name == 'Saturday',
      'is-invalid-date' : day.name === 'Saturday' || day.name === 'Sunday'
      }"
  >
    <h4 :data-day="day.name" class="calendar__day-label">
      <span>{{ day.date ? day.date.slice(-2) : '' }}</span>
    </h4>
    <div class="calendar__day-cell__content" v-if="day.is_past == false && day.is_active">
      <p v-if="day.is_today">
        <em>You cannot add deals to today.</em>
      </p>
      <p class="calendar__day-cell__actions">
        <button
          class="calendar-day-action-button"
          v-for="(product, pi) in day.products"
          v-if="day.is_active == true"
          :key="product.id"
          @click="openForm(day, product)"
        >
          <!-- <svg width="14" height="14" viewBox="0 0 14 14" class="atrium-icon">
            <use xlink:href="#icon-edit"></use>
          </svg> -->
          Edit <strong>{{ product.name || 'NA' }}</strong> <span class="saver-deal-label" v-if="dealArrays[pi] > 0">{{dealArrays[pi]}}</span>
        </button>
      </p>
      <div class="input--toggle">
        <input type="checkbox" id="is_off" v-model="day.is_off">
        <label for="is_off">Day On/Off</label>
      </div>
      <strong class="has-overriding-price-tag" v-if="day.is_deal">
        <svg width="16" height="22" viewBox="0 0 16 22"><use xlink:href="#tougher-oil-logo-icon"></use></svg>
        Displaying as Saver Deals
      </strong>
    </div>
    <div v-else>
      <i></i>
    </div>
  </td>
</template>

<script>
export default {
  props: ["day"],
  computed: {
    dealArrays() {
      return this.day.products.map(u => u.units
        .reduce((a,b) => a.concat(b.price_override), []) // get an array of all price overrides
        .filter(i => i.price) // remove empty ones
        .length); // get the length
    },
    numberOfAllOverrides() {
      return this.dealArrays.reduce((a,b) => a + b, 0)
    },
    hasOverrides() {
      return this.numberOfAllOverrides > 0;
    }
  },
  methods: {
    openForm($day, $product) {
      Event.$emit("form-opened", $day, $product);
    },
  }
};

</script>