Invoke a Vue component's function using a property

Question

Invoke a Vue component's function using a property

Can a Vue component's method be triggered by passing the method's name to one of its properties?

// main.vue
<navigation :button-left="goback()"></navigation>



// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
  goback() {
    console.log('Run this.');
  },
},
...

I attempted this approach, but encountered an error:

[Vue warn]: Property or method "goback" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Absolutely, achieving this is quite feasible.

The simplest approach would involve passing a basic string, such as

<navigation button-left="goBack" />

Keep in mind that there is no requirement for v-bind.

Subsequently, within your component, you can make use of the prop value. For instance...

export default {
  template: `<button @click="triggerButtonLeft">Click</button>`,
  props: ['buttonLeft'],
  methods: {
    triggerButtonLeft () {
      if (typeof this[this.buttonLeft] === 'function') {
        this[this.buttonLeft]()
      } else {
        console.error('Invalid method name:', this.buttonLeft)
      }
    },
    goBack () {
      console.log('Executing this.')
    }
  }
}

You haven't specified the event to activate the method execution, so I've chosen a click event.

Answer 2

Absolutely, achieving this is quite feasible.

The simplest approach would involve passing a basic string, such as

<navigation button-left="goBack" />

Keep in mind that there is no requirement for v-bind.

Subsequently, within your component, you can make use of the prop value. For instance...

export default {
  template: `<button @click="triggerButtonLeft">Click</button>`,
  props: ['buttonLeft'],
  methods: {
    triggerButtonLeft () {
      if (typeof this[this.buttonLeft] === 'function') {
        this[this.buttonLeft]()
      } else {
        console.error('Invalid method name:', this.buttonLeft)
      }
    },
    goBack () {
      console.log('Executing this.')
    }
  }
}

You haven't specified the event to activate the method execution, so I've chosen a click event.

Invoke a Vue component's function using a property

Answer №1

Similar questions

Nashorn poses a security threat due to its ClassFilter vulnerability

Working with MySQL in Node.js using async/await

When transmitting a variable from JavaScript to PHP using Ajax, the data appears to be missing

What is the best way to retrieve an ng-model parameter within a controller?

Interactive VR Experience Using A-Frame and Three.JS Raycasting

React: How to retrieve values from a dynamic dropdown menu

What is the best way to reset everything back to its original position by clicking anywhere on the screen except for the specified div?

What sets apart toBeInTheDocument from getBy* in @testing-library/react?

Modifying Data in Another Component in VueJS

Adding a new key-value pair to a JSON data structure

Assessing the string to define the structure of the object

What is the best way to overlay a 2D text layer on top of a Three.js scene?

Having trouble with parsing JSON data using jQuery?

JavaScript string constant remains unterminated

Hold off on running the code until the image from the AJAX request is fully loaded and

Running a JavaScript file from a C# application

Encountering an error while attempting to utilize the split function in browser.umd.js due to

Configuring date and time picker options on the fly

Retrieving data from a script within a React component

Kohana ajax causing removal of JQuery Data attributes