Is there a way in Vue.js for me to access a method from within the same component using the component's data?

Question

Is there a way in Vue.js for me to access a method from within the same component using the component's data?

Below is the code for a specific component:

<template>
   <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //attempting to call the method in the component
      {{menu.title}}
   <li>
</template>
<script>
export default {
        data: () => ({
            menu: [
                {title: 'Start Preparing', action: this.startPrepare}, //how do I reference the method here?
                {title: 'Cancel Order'},
            ],
        }),

        methods: {
            startPrepare: function (orderId) {
                console.log("start")
            }
        }

    }
</script>

The menu section in the data part includes both title and action properties. The goal is to trigger the specified function when an item is clicked within the template.

The challenge lies in referencing a method from the same component in the data section. Currently, there's an error indicating that startPrepare is undefined.

Please let me know if you need further clarification.

javascript vue.js vuejs2 vuetify.js

Answer 1

Answer №1

One issue that stands out is the use of an arrow function for the data, which can cause problems binding to the Vue instance. Consider using a regular function instead ..

export default {
  data() {
    return {
      menu: [{
          title: 'Start Preparing',
          action: this.startPrepare
        }, //how do I reference the method here?
        {
          title: 'Cancel Order'
        },
      ],
    }
  },
  methods: {
    startPrepare: function(orderId) {
      console.log("start")
    }
  }

}

<template>
    <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //trying to call the method in the component
        {{menu.title}}
    <li>
</template>

Answer 2

One issue that stands out is the use of an arrow function for the data, which can cause problems binding to the Vue instance. Consider using a regular function instead ..

export default {
  data() {
    return {
      menu: [{
          title: 'Start Preparing',
          action: this.startPrepare
        }, //how do I reference the method here?
        {
          title: 'Cancel Order'
        },
      ],
    }
  },
  methods: {
    startPrepare: function(orderId) {
      console.log("start")
    }
  }

}

<template>
    <li v-for="(item, i) in this.menu" :key="i" @click="item.action()"> //trying to call the method in the component
        {{menu.title}}
    <li>
</template>

Answer 3

Answer №2

One way to incorporate the method name as a string in your Vue template is by setting it as a property in the data object and accessing it using

@click="handleAction(item.action)"

:

<template>
   <li v-for="(item, i) in menu" :key="i" @click="handleAction(item.action)">
      {{menu.title}}
   <li>
</template>
<script>
export default {
        data() {
            return {
                menu: [
                    {title: 'Start Preparing', action:'startPrepare'}, //how do I reference the method here?
                    {title: 'Cancel Order'},
                ],
            };
        },
        methods: {
          handleAction(actionName){
          this[actionName]();
           },
           startPrepare(orderId) {
              console.log("start")
           }
        }

    }
</script>

Answer 4

One way to incorporate the method name as a string in your Vue template is by setting it as a property in the data object and accessing it using

@click="handleAction(item.action)"

:

<template>
   <li v-for="(item, i) in menu" :key="i" @click="handleAction(item.action)">
      {{menu.title}}
   <li>
</template>
<script>
export default {
        data() {
            return {
                menu: [
                    {title: 'Start Preparing', action:'startPrepare'}, //how do I reference the method here?
                    {title: 'Cancel Order'},
                ],
            };
        },
        methods: {
          handleAction(actionName){
          this[actionName]();
           },
           startPrepare(orderId) {
              console.log("start")
           }
        }

    }
</script>

Is there a way in Vue.js for me to access a method from within the same component using the component's data?

Answer №1

Answer №2

Similar questions

Tips for implementing a selection event in an auto complete dropdown menu:

Is there a way to update the data on a view in Angular 9 without the need to manually refresh the page?

Preventing page navigation in JavaScript: Why it's so challenging

Maintain the selected image

What does React default to for the implementation of the ``shouldComponentUpdate`` lifecycle method in its components?

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

Swap out the svg element with an icon alternative

Passing a PHP variable between PHP files with the help of jQuery

What is a better alternative to using the Event Bus for inter-component communication: data and computed properties

PHP is unable to show items containing special characters such as double quotes and apostrophes

Developing an animated feature that displays a dynamic count up to the current size of the browser window

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Choose a specific option from the dropdown menu using a URL parameter

Is there a way for mocha to conduct a recursive search within my `src` directory in order to find a specific

"Adjusting the position of the Icon in the Material UI ItemList to make it closer

Elevate with Ease: Tailwind's Height Transition

Preserve data across all pages using sessions

Import ES6 code by wrapping it in parentheses

Ensuring the Accuracy of POST Parameters Using Express-Validator

Design my div layout to resemble a tree shape