Dynamically changing the date format within the item-text of v-autocomplete in Vuetify

My current v-autocomplete component is fetching an array of items from GrowthTasks.edges to display.

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

The item-text property retrieves the text using node.growthStartDate, which is in a date format such as "2020-05-06".

Now, I want to convert it into a format like "2020-W19", and I know this can be achieved with moment("YYYY-[W]WW"), but I'm unsure how to implement this with the item-text property.

In essence, I would like the output in item-text to be similar to:

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

This particular code snippet works as intended. Any suggestions on how I can achieve this transformation?

javascriptvue.jsvuejs2vuetify.jsv-autocomplete

Answer №1

You have the option to create a computed property that will format dates for you:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63050c0d1723554d1b">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f4f7e7f6ebe4fbc2b0acfa">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaaa9b99ceef2a4">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b3b0a0b1aca3bc85f7ebbd">[email protected]</a>/dist/vuetify.js"></script>

Answer №2

To enhance your application's functionality, consider utilizing filters or methods with the v-slot:item feature. When passing a date to moment.js, it is recommended to leverage Filters. By globally registering filters, you can conveniently utilize them throughout your entire application.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2d24253f0b7d6533">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff898a9a8b969986bfcdd187">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcdcedefb8995c3">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c5c6d6c7dad5caf3819dcb">[email protected]</a>/dist/vuetify.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In what way can data be retrieved from within a useEffect block externally?

Essentially, I'm facing an issue with retrieving data from the DateView component in my ChooseCalendar component. The code that retrieves this data is located within a useEffect block due to passing a dateType variable as part of a useState to the com ...

javascriptreactjsnext.jsreact-hookscomponents

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

javascriptjqueryhtmlcssmousemove

Glitches and sudden jumps occur when using the useMediaQuery function in Material UI

Implementing Material UI's useMediaQuery() hook, I have embedded the theme provider and initialized a variable in this way: const theme = useTheme(); const isSmall = useMediaQuery(theme.breakpoints.down('sm') ); I am utilizing the isSmall v ...

javascriptreactjsmaterial-ui

Loop through a collection of items based on the values in a separate array using jQuery

I have a list of objects below The newlist and SelectID array are both dynamic. I am populating through a function, now I need to iterate and create the new list. var newList = [ { id : 1,name="tea",plant:"darjeeling"}, { id : 2,name="cof ...

javascriptjquery

How can we dynamically render a component in React using an object?

Hey everyone, I'm facing an issue. I would like to render a list that includes a title and an icon, and I want to do it dynamically using the map method. Here is the object from the backend API (there are more than 2 :D) // icons are Material UI Ic ...

javascriptreactjstypescriptreact-hooksnext.js

What steps do I need to take to create npm packages specifically for react-native development?

Which programming languages are essential for creating npm packages that work on both android and ios platforms in react-native development? Can you suggest any helpful documentation or blogs for developing npm packages that support ...

javascriptreactjsreact-nativenpm

Restrict Type of Child Element in Vue.js

After exploring various options, I have yet to find a definitive answer on whether this functionality can be achieved using vue.js. Coming from a react background where a similar concept exists, I am interested in implementing... My goal is to restrict th ...

vue.js

Access the extended controller and call the core controller function without directly interacting with the core controller

i have a core controller that contains an array called vm.validationTypes with only 2 objects. I need to add 3 or 4 more objects to this array. to achieve this, i created another controller by extending the core controller: // CustomValidation angular.m ...

javascriptjqueryangularjsangularjs-scope

Transferring PHP array data to JavaScript using echo

I'm currently in the process of working on a project that requires extracting data from a database and converting it into a JavaScript array. This array will be used to dynamically update a graph. Below is the PHP code I have written to retrieve the ...

javascriptphparraysjsongoogle-visualization

"How to ensure consistent styling for all buttons, including dynamically created ones, in an application by utilizing the jQuery button widget without the need for repetitive calls to

Hello everyone, I am a newcomer to stack overflow and I have a question to ask. Please excuse any errors in my query. I have searched for an answer but have not been successful in finding one so far. Let's say I have a webpage where I am using the jQ ...

javascriptjqueryasp.net-mvcjquery-uijquery-ui-button

Delete auto-generated list using handlebars JS

I have successfully created a dynamic list using Handlebars.js and its template. However, I am now facing confusion on how to remove or delete items from the list using a function or specific code. As I am new to Handlebars, I would appreciate any help. ...

javascriptjqueryhtml

Arranging elements in two arrays in either ascending or descending order

Looking to implement sorting functionality for the "fuel.name" value within this array... const orders = [ { "_id":"5d14a31490fb1e0012a3d2d8-1", "orderId":"0JL5ORM0JT-1", "created":"2019-06-27T11:05:56.377Z", "createdDate":"2019-06-2 ...

javascriptarrayssortingecmascript-6functional-programming

Player script does not contain a valid function signature according to XCDYouTubeKit

I need help finding a regular expression to match these Youtube links. I'm feeling lost and unsure of what to do. https://www.youtube.com/watch?v=2BS3oePljr8 http://www.youtube.com/watch?v=iwGFalTRHDA http://www.youtube.com/watch?v=iwGFalTRHDA& ...

javascriptiosswiftregexurl

Having trouble with shipit.js deployment: Error encountered - git checkout undefined

I have been using shipit.js to deploy my nodejs application on an Ubuntu 16.04 server successfully. However, I recently encountered the following error: ./node_modules/shipit-cli/bin/shipit production deploy start Running 'deploy:init' task... ...

javascriptnode.jsdeploymentshipitjs

When employing useNavigation, the URL is updated but the component does not render or appear on the

Check out this code snippet: https://codesandbox.io/p/sandbox/hardcore-lake-mptzw3 App.jsx: import ContextProvider from "./provider/contextProvider"; import Routes from "./routes"; function App() { console.log("Inside App" ...

javascriptreactjsreact-router-dom

What is the purpose of having several script tags following the creation of NextJS?

After running next build and next start, my application is still generating many JS files instead of a single entry point. I'm unsure if I missed a step as the documentation suggests this should be all that's required. https://i.stack.imgur.com/7 ...

javascriptnext.js

Can we create a process that automatically transforms any integer field into a hashed string?

Is there a non-hacky way to hash all IDs before returning to the user? I have explored the documentation extensively but haven't found a solution that covers all scenarios. I am working with Postgres and Prisma ORM, managing multiple models with rela ...

javascriptpostgresqlexpresshashprisma

JavaScript function is returning 'undefined' instead of an integer

My JavaScript/jQuery function is not functioning correctly and instead of returning an integer, it returns undefined. function __getLastSelectedCategory(table_id) { if ( jQuery('.categories_table[data-table-id="1"]').find('td.active&apo ...

javascriptjqueryrecursion

Is there a way to convert a string containing a date calculation, such as "now + 1 day", into a date object?

Currently, my team is utilizing Cucumber to define our test cases within string-based feature files. Our integration tests are executed against a wiremock stub that contains date calculations such as: "{{now offset='+15 minutes'}}" I am seeking ...

javascriptdatecucumbermomentjscucumberjs

What is the best way to access a custom object in JavaScript that was created in a different function?

Currently working with JavaScript and jQuery technology. In one of my functions that runs on document ready, I am creating objects with different attributes. While I can easily access these object attributes within the same function, I'm facing diff ...

javascriptjquery