Incorporating the power of moment.js into your Vue.js

Hey there, I'm currently working on a project using Bootastrap-Vue along with JavaScript and I'm trying to incorporate Moment.js into my code.

However, the time I am getting is not accurate. Can anyone help me out with this issue?

Just a heads up - this is actually my first question here on StackOverflow, so please forgive me if I've made any mistakes in asking it.

Thank you!

var moment = require('moment')
export default {
    name: 'something',
    data() {
        return {
            something: [],
            currentPage: 1,
            total_something: 1,
            something_fields: {
                id: {
                    label: 'Id',
                    sortable: true
                },
                purpose: {
                    label: 'Purpose',
                    sortable: false
                },
                state: {
                    label: 'State',
                    sortable: false
                },
                updated: {
                    key: 'updated',
                    label: 'Updated',
                    formatter: (value, key, item) => {
                            return moment(item.updated).calendar();

                    }
                }
            },
        }
    },
    created() {
        this.loadSomething(0, 10)
    },
    watch: {
        currentPage: function (newPage) {
            this.loadSomething(newPage, 10)
        }
    }, methods: {
        loadSomethings(currentPage, limit) {
            if (!(Number.isInteger(currentPage) && Number.isInteger(limit))) {
                currentPage = 0
                limit = 10
            }
            var offset = (currentPage - 1) * limit
            window.API.get('something?offset=' + offset + '&limit=' + limit)
                .then(response => {
                    this.something = response.data.something;
                    this.total_something s = response.data.total;
                    console.log(response.data.something)
                })
                .catch(e => {
                    this.errors.push(e)
                })
        }
    }
}

Answer №1

converter: (data, index, obj) => {
      if(obj.created) {
         return moment(obj.created).format(); // format(YOUR DATE FORMAT)
      }

}

https://momentjs.com/docs/

Answer №2

Here's a helpful code snippet:

updated:{
    key: 'updated',
    label: 'Updated',
    formatter: (value, key, item) => {
        return moment(item.updated).format('DD-MM-YYYY');
    }
}

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

Attempting to manipulate the selected tab material using a custom directive with two-way data binding

I've been struggling to change the tab using code and can't seem to figure out what's causing the error. It works fine when I use the controller to change the variable, but when trying to bind it through a directive, it breaks. var app = an ...

There appears to be an issue with Three.js as it is indicating that the node.apply

I am currently attempting to import a .fbx file using the FBXLoader from three.js with the following code block: var fbxLoader = new THREE.FBXLoader(); fbxLoader.load('assets/item2.fbx', function (object){ object.position.y = -100; scene.add(obj ...

Node js process.kill(pid) is ineffective in terminating a Linux process

Trying to terminate background processes using nodejs process.kill(pid, 'SIGTERM') results in the processes not being killed. After running the node script provided below, I checked the processes using ps -efww | grep 19783 | grep -v grep in the ...

How can I pass a PHP variable into a Vue computed function within a Laravel blade template?

I'm looking for a way to link the variable $price_php with the price property in my Vue object. Unfortunately, due to project constraints, we are unable to utilize templates and imported components. <html > <head> <meta charset=&quo ...

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

Incorrect output in template when using Vue and dayjs

When I check the console log, it displays 15:14, but in the template, I'm seeing 12:14. What could be causing this inconsistency? <template> <span>{{ date }}</span> <!-- **anticipated** Thu, 25 Feb 2021 15:14:04 Thu, **receive ...

Vue3 JS Component: A Component Staying the Same

I am currently working on a component that retrieves data from an API. The data returned from the API is in the form of an array with various details. One of the values in this array specifies the type of component that needs to be rendered, while all the ...

Looping through each combination of elements in a Map

I have a Map containing Shape objects with unique IDs assigned as keys. My goal is to loop through every pair of Shapes in the Map, ensuring that each pair is only processed once. While I am aware of options like forEach or for..of for looping, I'm s ...

jQuery AJAX in ASP.NET MVC

I am developing a website that displays comments on each user's page and allows other users to add comments. My goal is to have the comment form visible on the same page, so when a user adds a comment, it gets saved in the database and appears instant ...

Turning On/Off Input According to Selection (Using jQuery)

<select name="region" class="selection" id="region"> <option value="choice">Choice</option> <option value="another">Another</option> </select> <input type="text" name="territory" class="textfield" id="territo ...

issue with AJAX POST request not functioning correctly upon form submission

Having an issue with Ajax post while trying to submit a form event. I am working with a table that is generated by opentable.php. Here is the code for opentable.php: <?php session_start(); require("dbc.php"); $memberid = $_SESSION['memberid' ...

What is the process for duplicating by value?

I am utilizing a DataTables plugin and have it defined like this: var oTable = $('#table1').dataTable({ 'aaData': data, 'aoColumns': columns, 'bScrollInfinite': true, 'bScrollCollapse&ap ...

Turn off Dart SASS notifications from external theme file

Is there a way to disable the warnings for third party SCSS files included in a project when using Dart SASS with Vue? I have a third party SCSS file that is triggering a long list of warnings, and I'm not sure if I am utilizing the quietDeps option ...

With Jquery, my goal is to position a div outside of another div element

I need to place a div tag in a specific way, like this: <div class="abc"> <div class="mySlides fade"> <img src="img_nature_wide.jpg" style="width:100%"> </div> <div> Using jQuer ...

Discovering objects on a JavaScript webpage using Selenium

Looking to automate some searches for myself, but running into an issue. Here is the website in question: Struggling to locate the search bar using the program, and unsure why. driver = webdriver.Firefox() driver.get('https://shop.orgatop.de/') ...

What methods do Google and Yahoo use to update the URL displayed in the browser's status bar?

Have you ever noticed that on Google and Yahoo search pages, the URLs of the search result links actually point to google.com or yahoo.com? It's a clever trick they use by adding extra arguments to the URLs that allow for redirection to the actual sea ...

Dynamically generating subitems for a menu

I have created a Menu using CSS/Bootstrap in my asp.net application, but I need the submenus to be generated dynamically based on the user's role at runtime. Does anyone have any suggestions on how I can achieve this? I am looking for ideas on how to ...

Having trouble executing node commands in the terminal

After launching the terminal on my Mac, I made sure to confirm that Node was installed by running the command: node -v v14.17.5 Next, when attempting to open a file I had created called index.html from Visual Studio Code, I encountered an error message in ...

Switch between Bootstrap Chevron

I need assistance with toggling a chevron in a bootstrap dropdown menu. Currently, the chevron only changes when clicked directly, but I want it to change whenever the dropdown is toggled open or closed. This way, if another part of the menu is clicked, th ...

Using Javascript to Retrieve Icecast Metadata

I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...