What is the method for binding context on a click event in Vue?

Question

What is the method for binding context on a click event in Vue?

Can't access context function on click in Vue

Example HTML with click function:

<li v-on:click="itemClick($event, this)"></li>

My Vue.js code snippet:

var app = new Vue({
    el: '#mainApp',
    methods: {
        itemClick: (event, context) => {
            context.someFunction(); // undefined
            this.someFunction(); // undefined
        }, 
        someFunction: function() {
            // ...
        }
    }
}

Any suggestions on how to solve this issue?

javascript vue.js this

Answer 1

Answer №1

Handling Events - React Docs

In the React documentation, left-click triggers the @click event by default, while right-click triggers the @contextmenu event. As with vanilla JavaScript, you simply need to specify the function to be called when the event occurs.

methods() - React Docs

Within the methods section, functions are declared within an object structure, separated by commas instead of semicolons. You can refer to the provided example in the documentation for guidance on structuring these functions.

The code snippet displayed aligns with the Options API format, so I will present a code example following this pattern below.

Example with Options API

<template>
  <div>
    <button @click="(event) => handleClick(event)">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // context.someFunction(); // not applicable here
      this.someFunction(); // call methods.someFunction()
    }, // <--- use , instead of ; as methods is an object containing functions like handleClick() and someFunction()
    someFunction() {
      // ...
    }
  }
}
</script>

Answer 2

Handling Events - React Docs

In the React documentation, left-click triggers the @click event by default, while right-click triggers the @contextmenu event. As with vanilla JavaScript, you simply need to specify the function to be called when the event occurs.

methods() - React Docs

Within the methods section, functions are declared within an object structure, separated by commas instead of semicolons. You can refer to the provided example in the documentation for guidance on structuring these functions.

The code snippet displayed aligns with the Options API format, so I will present a code example following this pattern below.

Example with Options API

<template>
  <div>
    <button @click="(event) => handleClick(event)">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // context.someFunction(); // not applicable here
      this.someFunction(); // call methods.someFunction()
    }, // <--- use , instead of ; as methods is an object containing functions like handleClick() and someFunction()
    someFunction() {
      // ...
    }
  }
}
</script>

What is the method for binding context on a click event in Vue?

Answer №1

Example with Options API

Similar questions

Button click initiates DataTables search rather than manually entering text in the input field

Is it possible to transform a webpack configuration into a Next.js configuration?

Clicking on Fixed Positioning triggers a reset

Error: The 'replace' property of null cannot be read in select2

Vessel situated after the helm

Encountering a syntax error while attempting to import modules from amCharts

Challenges faced when attempting to launch a React-powered application on Railway platform

What is the method for ensuring a variable returns a number and not a function?

Reset checkboxes in Material UI data grid

Django does not support running JavaScript natively

Setting the ariaLabel value in TypeScript is a straightforward process that involves defining the

When using Selenium WebDriver in Java, we noticed that despite initially failing with JavascriptExecutor, the element click method with WebElement performed successfully

React - Updating the Color of a Specific Div within a Map Component

Is there a way to prevent the window.status from appearing?

nodemon is launching an endless number of .node-xmlhttprequest-sync files

Using Jquery's append() method to dynamically alter the HTML content

The issue of 'MessageChannel not defined' arises specifically on web pages that have implemented reCaptcha v2

Creating a code script for the purpose of automating npm commands

How to effectively pass data between parent and child controllers in Angular 1 - Seeking guidance

Is there a way to prevent row-clicked events from triggering in a specific column in b-table?