Invoke a function in the Vue.js component

I am new to Vue.js and I am trying to figure out how to call a method from a component.

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['createdat'],
            template: '
            <div>
              {{ postedOnA(createdat) }}
              {{ postedOnB(createdat) }}
            </div>',
        },
        methods: {
            postedOnA: function (createdat) {
                var date = new Date(createdat);
                return date.getHours() + ' ' + date.getMinutes();
            }
        }
    },
    methods: {
        postedOnB: function(createdat) {
            var date = new Date(createdat);
            return date.getHours() + ' ' + date.getMinutes();
        }
    }
})

Even after attempting to call the component method, it is still not working as expected.

Any help would be greatly appreciated. Thank you!

Answer №1

Develop filter options to enhance formatting.

In this scenario:

var app = new Vue({
    el: '#app',
    components: {
        message: {
            props: ['timestamp'],
            template: '
            <div>
              {{ timestamp | convertTime }}
            </div>',
        }
    },
    filters: {
      convertTime: function (value) {
         var time = new Date(value);
         return time.getHours() + ' ' + time.getMinutes();
      }
    }
})

For further information, visit: https://v2.vuejs.org/v2/guide/filters.html

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

Learn how to implement datatables in your web application by combining Vue.js with Laravel

I'm currently populating a table and I want to implement pagination, searching, and filter criteria. However, as a newcomer to Vue, I'm unsure how to incorporate these features into my code. Here is the content of my Vue file: <template> ...

Struggling to Convert Array of MongoDB Documents from Backend into React Components

In an attempt to connect my front-end to the back-end, I am looking to retrieve all the "blog posts" stored in my MongoDB database. Currently, there is only one document available for testing purposes. The backend contains this API endpoint: app.get("/api ...

You cannot nest a map function within another map function in React

Having some trouble applying the map function in HTML using React. Below is the code snippet: response = [ data : { name: 'john', title: 'john doe', images: { slider: { desktop: 'link1', mo ...

Error: The function call does not match any of the overloads. 'VueRouter' is not recognized

I'm new to TypeScript and currently trying to implement vue-router in my project. Encountering the following errors: Error TS2769: No overload matches this call in source\app\main.ts(3,3). Overload 1 of 3, '(options?: ThisTypedCompon ...

Improve numerous conditions

I am currently working on a project that involves Angular and Node. In this project, I have written a function with multiple if and else if statements containing various conditions. The code looks complex and lengthy, and I want to refactor it to make it ...

Errors can arise in Discord.js when encountering "undefined" before the first array object in an embed

I am currently in the process of creating a Discord bot command that allows users to construct their own city. I am encountering an issue with a list command that is supposed to display all the roads and places built within the city. However, each list kee ...

Align the object with the path it is following

Currently, I am in the process of learning about vectors and their application in moving objects within ThreeJS. For an experiment, I am propelling a box using a specified velocity and an arbitrary gravity vector. Additionally, I am attempting to align th ...

Can we iterate through a specific set of object attributes using ng-repeat?

Imagine I have the following: $scope.listOfAttributes = ["someThings", "yetMoreThings"] $scope.whatever = { someThings: "stuff", otherThings: "Also stuff", yetMoreThings: "still stuff" }; Can I achieve something like this: <ul> ...

What is the best way to invoke a method within the $http body in AngularJS

When I try to call the editopenComponentModal method in another method, I encounter the following error: angular.js:13920 TypeError: Cannot read property 'editopenComponentModal' of undefined EditCurrentJob(job) { this.$http.put(pr ...

Guide on retrieving the response headers with jQuery and AJAX

Connection: keep-alive Content-Length: 2231 Content-Type: text/html; charset=utf-8 Date: Thu, 13 Sep 2018 07:37:46 GMT ETag: W/"8b7-XOXhf04O/VM7yxWQ561PEgxRfz8" x-auth: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1YjlhMGEyM2Q0NmI3YjFmYTQzNWI ...

What is the best way to use Vue to dynamically generate several bootstrap cards?

Utilizing Bootstrap cards with Vue dynamically is my goal. By using Bootstrap Vue, I am able to generate a card as shown below: <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top> <b-card-text> ...

javascript best practice for processing form data with arrays

As a newcomer to javascript, I've been exploring more efficient ways to handle certain situations. For example, would it be possible to utilize an array for this particular scenario? Here's the challenge: I have an HTML form with 6 fields that a ...

Strategies for Handling a High Volume of API Requests in Node JS

My journey with Node JS began recently, and I had a smooth start. I followed an online tutorial and successfully accepted a GET request in my server.js file. Coming from a Java background, I found myself with a handful of questions that I couldn't fi ...

Encountering an issue with blogs.map function in a Next.js application

import Head from 'next/head' import { useState } from 'react' import Image from 'next/image' import styles from '../styles/Home.module.css' const Home = (props) => { const [blogs, setblogs] = useState(props.dat ...

Troubles with jQuery mobile functionality when utilizing hyperlink urls within a table

Currently, I am utilizing jQuery mobile to populate a table using ajax. One of the fields in the table is a hyperlink (href) that has a class assigned to it to trigger an alert on the screen. However, the alert does not appear when clicked: I have attempt ...

React-Redux Countdown Timer Component

I recently created a JavaScript function in Symfony, but now I need to transfer it to React-Redux. However, as a beginner in React, I am struggling to make it work. Here is the issue I am facing: In my application, there is a list of cars parked in a par ...

ES6 Error: Uncaught TypeError - Unable to call modal function

Looking for assistance with ES6 since I am new to it and could use another set of eyes and expertise. Here is my index.js file where I'm attempting to integrate fullcalendar.io: import $ from 'jquery'; import 'bootstrap'; import ...

Is it possible to add additional data using jQuery?

I'm utilizing knockoutjs to bind data, and I aim to attach data bind in a single element. Below is the code snippet : html: <div id="wrapper"> <div data-bind="foreach: people"> <h3 data-bind="text: name"></h3> < ...

Tips for showcasing messages in a .dust file with connect-flash and express-messages in a Node application

I am currently working with Nodejs, Expressjs, and Kraken. I have been trying to display a message when a product is added on the index page, but despite several attempts to configure it, the messages are still not appearing as expected. Below is my config ...

Wave: clock strikes midnight

I have a data chart with the X-axis representing time. I want the ticks on the X-axis to be placed at 0:00 each day. This was working fine before I updated to the latest version of Flot. ... xaxis: { ticks: 6, mode:"time", timezone:<cfout ...