Dayjs 没有在 vue v-for 中更新

Question

在组件模板中，我有以下代码：

<v-col cols="6" v-for="(value, idx) in data[workingYear].monthValues" :key="idx">
  {{ idx }}
  <v-row class="ai-center">
    <!-- Month -->
    <v-col cols="2">{{
      dayjs(idx + 1, "M").format("MMM").ucfirst()
    }}</v-col>
    <!-- Value -->
    <v-col cols="10">
      <v-text-field
        class="mt-0 pt-0"
        hide-details="auto"
        min="0"
        suffix=",00"
        type="number"
        v-model="data[workingYear].monthValues[idx]"
        :label="$t('set')"
        :prefix="getCurrency(true)"
        :ref="'monthValue' + idx"
        :rules="[rules.required, rules.invalid]"
      />
    </v-col>
  </v-row>
</v-col>

data[workingYear].monthValues 被初始化为 new Array(12).fill("") 所以它是一个包含 12 个空字符串元素的数组； ucfirst() 是 String.prototype 的自定义扩展，它将字符串的第一个字符大写。

我打算在第一个 v-col 块中找到一个递增的月份，但结果如下：

那么，为什么 {{ idx }} 在每个循环中递增，但月份始终是一月？我该如何解决这个问题？

Answer 1

我建议使用一个计算属性，它 return 是一个将索引作为参数和 return 月份作为参数的函数：

    <v-col cols="2">{{
      getMonth(idx)
    }}</v-col>

脚本：

computed:{
  getMonth(){
   return (idx)=>dayjs(`${idx + 1}`, "M").format("MMM").ucfirst()
 }
}

Answer 2

dayjs 似乎只需要字符串作为输入日期所以这样写是解决方案： dayjs("" + (idx + 1), "M").format("MMM").ucfirst()

顺便说一句，在这一点上，Boussadjra Brahim 发布的解决方案更加优雅和可读性更高，因此为函数 +1。

谢谢

Dayjs 没有在 vue v-for 中更新

Dayjs is not updating in vue v-for

vue.js

dayjs