Ways to invoke a prop function from the setup method in Vue 3

Question

Ways to invoke a prop function from the setup method in Vue 3

I encountered the following code:

HTML:

<p @click="changeForm">Iniciar sesion</p>

JS

export default {
   name: "Register",
   props: {
      changeForm: Function,
   },
   setup() {
      //How do I invoke the props changeForm here???
   }
}

What is the correct way to call my props function from JS? Is there a way to simulate a click on my p element to trigger it?

I am currently using Vue 3. I have experimented with this.changeForm and props.changeForm but haven't had success.

javascript vue.js vue-component vuejs3 vue-props

Answer 1

Answer №1

When the setup function is invoked, it takes props as its initial parameter:

export default {
   name: "Registration",
   props: {
     switchForm: Function,
   },
   setup(props) {            // accepting `props` argument
     props.switchForm();     // utilizing it to access `switchForm`
   }
}

Answer 2

When the setup function is invoked, it takes props as its initial parameter:

export default {
   name: "Registration",
   props: {
     switchForm: Function,
   },
   setup(props) {            // accepting `props` argument
     props.switchForm();     // utilizing it to access `switchForm`
   }
}

Ways to invoke a prop function from the setup method in Vue 3

Answer №1

Similar questions

Update the primary folder for the assets in the Vue build

When a const variable is declared within the composition-api setup(), it remains unchanged unless redeclared within the function scope

Guide on deleting objects based on their IDs when the IDs are stored in a separate array using JavaScript

Is there a way to make my for loop search for the specific element id that I have clicked on?

Using MongoDB and NodeJS to retrieve data from a promise

Use Google Maps and MySql to retrieve specific markers within a designated radius using unique latitude and longitude coordinates

How can you create a basic click event for a Google Maps marker?

Step-by-step guide on utilizing the .change method in order to deactivate a

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

Transform or retrieve information from input into unformatted text

Is it considered poor form to use res.locals in Node.js with Express?

The closure in question received an undefined Angular parameter

Leveraging the power of AngularJS to run JavaScript functions saved as strings

Error in form action when generated through an ajax partial in Ruby

Parsing JSON data using multilevel iteration in JavaScript is a complex yet

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Locate a string containing a series of words separated by a character, with the last word being able to end with any combination of characters through the use of regex

Retrieve the data from every dropdown menu

How do the JavaScript thread and the Silverlight UI thread interact with each other?

Sorting in MongoDB v3.6 is a breeze with the powerful capabilities that the