如何在 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

您可以創建計算屬性並返回格式化日期：

 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並可以在應用程序的任何地方使用它們。

 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>