Tengo este v-autocomplete que recibe una serie de elementos para mostrar desde GrowthTasks.edges
<v-autocomplete label="Start Week" :items="GrowthTasks.edges" item-text="node.growthStartDate" item-value="node.growthStartDate" dense></v-autocomplete> El item-text recibe el texto desde allí accediendo a node.growthStartDate , que tiene un formato de fecha como: "2020-05-06".
Ahora quiero convertirlo en un formato como "2020-W19", que sé que es posible usando moment("YYYY-[W]WW") pero no sé cómo decirle esto a item-text .
Básicamente, quiero que el resultado en el texto del elemento sea el mismo que si estuviera usando:
{{ node.growthStartDate | moment("YYYY-[W]WW") }}que funciona
¿Alguna idea de cómo puede hacerlo?
Puede crear propiedades calculadas y devolver fechas formateadas:
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>Puede usar filtros o métodos usando v-slot:item . Si desea pasar una fecha a moment.js , sugiero usar Filters , puede registrar filters globalmente y puede usarlos en cualquier lugar de su aplicación.
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>