如何在 v-autocomplete 中动态格式化项目文本的日期（Vuetify）

Question

我有这个 v-autocomplete，它从 GrowthTasks.edges

接收要显示的项目数组

<v-autocomplete label="Start Week" 
:items="GrowthTasks.edges" item-text="node.growthStartDate" item-value="node.growthStartDate" dense></v-autocomplete>

item-text 通过访问 node.growthStartDate 从那里接收文本，这是一种日期格式，例如：“2020-05-06”。

现在我想把它变成类似 "2020-W19" 的格式，我知道可以使用 moment("YYYY-[W]WW") 但我不知道如何告诉 item-text.

基本上，我希望项目文本的结果与我使用的结果相同：

{{ node.growthStartDate | moment("YYYY-[W]WW") }}

有效。

知道怎么做吗？

Answer 1

您可以创建计算的属性和 return 格式化日期：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      GrowthTasks: {edges: [{growthStartDate: "2020-05-06"}, {growthStartDate: "2020-06-07"}]}
    }
  },
  computed: {
    items() {
      return this.GrowthTasks.edges.map(obj => ({ ...obj, growthStartDate: moment(obj.growthStartDate).format("YYYY-[W]WW") }));
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-autocomplete label="Start Week" 
:items="items" item-text="growthStartDate" item-value="growthStartDate" dense></v-autocomplete>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 2

你可以使用过滤器或方法使用v-slot:item，如果你想将日期传递给moment.js，我建议使用Filters，你可以注册filters 全局并可以在您的应用程序的任何地方使用它们。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      GrowthTasks: {edges: [{growthStartDate: "2020-05-06"}, {growthStartDate: "2020-06-07"}]}
    }
  },
  filters: {
    myDateFilter(date, desireFormat) {
      return moment(date).format(desireFormat);
    }
}
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      
        <v-autocomplete label="Start Week" 
:items="GrowthTasks.edges" item-text="growthStartDate" item-value="growthStartDate" dense>
      <template v-slot:item="data">
       {{ data.item.growthStartDate |  myDateFilter('YYYY-[W]WW') }}
      </template>
</v-autocomplete>
      
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

如何在 v-autocomplete 中动态格式化项目文本的日期（Vuetify）

How to dynamically format date on item-text inside v-autocomplete (Vuetify)

javascript

vue.js

vuejs2

vuetify.js

v-autocomplete