在 v-for 中计算而不是 v-if

Question

我有一个页面显示团队每个月的生日。使用两个按钮可以更改当前月份。

v-if 的解决方案工作正常，但由于这不是一个好的做法，我尝试使用计算属性。

              <tr v-for="birthday in birthdays" :key="birthday.name" v-if="birthday.month[month]">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="text-sm font-medium text-gray-900">
                      {{ birthday.name }}

生日示例数据：

[
    {
        "month": {
          "1": false,
          "2": false,
          "3": true,
          "4": false,
          "5": false,
          "6": true,
          "7": true,
          "8": false,
          "9": true,
          "10": false,
          "11": true,
          "12": false
        },
        "name": "team 2"
      },
  {
    "month": {
      "1": false,
      "2": false,
      "3": true,
      "4": false,
      "5": false,
      "6": true,
      "7": true,
      "8": false,
      "9": true,
      "10": false,
      "11": true,
      "12": false
    },
    "name": "team 1"
  }
]

和我的代码与计算属性 :

export default {
  data() {
    return {
      birthdays: {},
      month: false,
    };
  },

  async asyncData({ $axios, store }) {
    let email = store.state.auth.user.email;
    let month = new Date().getMonth() + 1;
    let { data } = await $axios.get("/birthday/?email=" + email);
    return { birthdays: data, month: month };
  },

  methods: {
    nextMonth() {
      if (this.month === 12) {
        this.month = 1;
      } else this.month = this.month + 1;
    },
    previousMonth() {
      if (this.month === 1) {
        this.month = 12;
      } else this.month = this.month - 1;
    },
  },
  computed: {
    fiestas: function () {
      let birthdays = this.birthdays;

      for (let team in birthdays) {
        if (!birthdays[team].month[this.month]) {
          birthdays.splice(team, 1);
        }
      }
      return birthdays;
    },
  },
};

这适用于当前月份（有几毫秒，或者我们在计算之前看到数据）但是当我们更改月份时，没有任何效果，例如生日已被修改。

也许在我的情况下最好留在 v-if 上？

Answer 1

splice 就地修改数组（而不是创建新数组）因此您的 fiestas 计算正在更改 this.birthdays 数组...

计算不应该有副作用。改为这样做：

computed: {
    teamsWithBirthdayInCurrentMonth: function () {
      return this.birthdays
       .filter(team => team.month[this.month])
       .map(team => team.name)
    },
  },

在 v-for 中计算而不是 v-if

Computed instead of v-if in v-for

vue.js

nuxt.js