Troubleshooting: The issue of Vue (v-on) not recognizing my function

I am brand new to Vue and JS, so please bear with me as I ask some "silly" questions.

Within my Vue-Pet-Project, I have implemented a self-authored class module called Sudoku. In this module, I aim to find solutions using backtracking. Upon clicking the "startSearch" button, Vue recognizes it but throws the following error:

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "ReferenceError: backtrack is not defined"

found in

---> warn @ vue.esm.js?a026:628 logError @ vue.esm.js?a026:1893 globalHandleError @ vue.esm.js?a026:1888 handleError @ vue.esm.js?a026:1848 invokeWithErrorHandling @ vue.esm.js?a026:1871 invoker @ vue.esm.js?a026:2188 original._wrapper @ vue.esm.js?a026:7559 vue.esm.js?a026:1897 ReferenceError: backtrack is not defined at Sudoku.search (sudoku.js?9ece:4) at VueComponent.startSearchSolutions (App.vue?9c43:74) at click (App.vue?88bf:69) at invokeWithErrorHandling (vue.esm.js?a026:1863) at HTMLButtonElement.invoker (vue.esm.js?a026:2188) at HTMLButtonElement.original._wrapper (vue.esm.js?a026:7559)

despite the fact that this function is indeed declared. Below is the code snippet of my class:

module.exports.Sudoku = class Sudoku
{
    [...]

search()
{
  console.log("search started")
  let results = []

  backtrack(this.myNumbers,0,0,results)

  return results
}

backtrack(testNumbers,x,y,results)
{
  console.log("start backtrack")

  //TODO: yet much to do...

  if(x===9 && y===9)
  {
    results.push([...testNumbers])
    console.log("result added")
  }
}
}

Where did I make a mistake?

Thank you for your assistance!

Answer №1

Make sure to use `this.backtrack` instead of just `backtrack` when referencing the backtrack method.

module.exports.Sudoku = class Sudoku
{
    [...]

search()
{
  console.log("search started")
  let results = []
  
  //Don't forget to reference the backtrack method using `this`. Remember, it's within the Sudoku class itself.
  this.backtrack(this.myNumbers,0,0,results)

  return results
}

backtrack(testNumbers,x,y,results)
{
  console.log("start backtrack")

  //TODO: much more left to do...

  if(x===9 && y===9)
  {
    results.push([...testNumbers])
    console.log("result added")
  }
}
}

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

AngularJS - ng-repeat: Warning: Repeated items found in the repeater and are not allowed. Repeater:

I'm currently using ng-repeat to showcase a collection of items fetched from the Twitter API. However, I am encountering an issue where Angular attempts to display the empty list while the request is still being processed, resulting in the following e ...

Enable a click event within an iFrame by clicking on an element in the parent document

I am attempting to trigger the click event of an element inside an iFrame (specifically a standard Twitter follow button) when clicking on an element within my main webpage. Below is the code snippet I have been experimenting with, but unfortunately it do ...

Instructions on obtaining a distinct daily array from the weather API array that provides a detailed 5-day weather report every 3 hours

Seeking assistance with my weather app development on React using axios with the openweathermap.org API. Currently stuck on getting data formatted in a specific way from the 5-day forecast it provides, totaling 40 reports over the 5 days. The API response ...

Angular animation triggered when a specific condition is satisfied

I am working on an animation within my Angular application @Component({ selector: 'app-portfolio', templateUrl: 'portfolio.page.html', styleUrls: ['portfolio.page.scss'], animations: [ trigger('slideInOut&apo ...

Employ a unique filter within the controller of your AngularJs directive

Current Situation I currently have an array of users with their information and I am using ng-repeat along with a custom directive to create HTML user cards. The scope for each card is specific to the individual user. Within the user model, there is a v ...

Vue: nesting components within components

Looking for a clever solution to create a nested component system with efficient rendering? Check out the code snippet below: custom-tab.vue (child component) <template> <slot></slot> </template> <script> export def ...

Guide to populating a full calendar using JSON information

Implementing the FUllCALENDAR CSS template for creating a meeting calendar has been my current project. The servlet class I am using is CalendarController. However, when running it, the output appears as follows: {"events":[{"id":1,"title":"1","s ...

Thorax.js bower installation issue

After following the instructions in this guide: https://github.com/walmartlabs/thorax-seed/blob/master/README.md, I ran into an unexpected issue on my Windows machine. When running npm start It seems like bower is doing a lot of work (presumably loading ...

Understanding how to retrieve the value count by comparing strings in JavaScript

In my array object, I am comparing each string and incrementing the value if one letter does not match. If three characters match with the string, then I increase the count value; otherwise, it remains 0. var obj = ["race", "sack", &qu ...

Zod verification problem based on certain conditions

By default, the email validation will be shown. If the contactNumber field has a value added, then the email field will not be mandatory. However, if the value is removed from the contactNumber, the email will become required. Make the email field opti ...

Is there a way to prevent undefined properties when using .each in jQuery with a JSON object?

I am trying to populate the values of <inputs> on a webpage using data from a JSON object. http://codepen.io/jimmykup/pen/exAip?editors=101 To begin, I create a JSON object with two values - one for name and one for url. var jsonObj = []; var nam ...

The compatibility issue between Bootstrap4 Navbar and "jQuery.BgSwitcher" is causing functionality limitations on mobile devices

Currently, I am utilizing Bootswatch4 within Bootstrap4 and have a requirement for a div with backgrounds that change or fade. After some research, I stumbled upon a JavaScript solution that aligns closely with my needs at: https://github.com/rewish/jquery ...

Sending mass text messages with a customized message for each phone number - A guide using Twilio

I have a batch of 100 to 1500 phone numbers that I need to send SMS messages to. Each message should include the recipient's name associated with the phone number in the text. How can I achieve this using Twilio? client.notify.services(notifyServiceS ...

Using Express.js to send responses piece by piece

Is it possible to send a response in chunk of data using Express.js? I experimented with this code on an online demo: const express = require('express'); const app = express(); const port = 3111; const sleep = (ms) => { return new Promise(( ...

Remove user from firebase with Admin SDK

I need help understanding how to remove a user from my admin panel using the Firebase Admin SDK. When attempting to delete a user, I encountered this error: Uncaught (in promise) ReferenceError: uid is not defined at eval (ManageCustomer. ...

The code execution continues as Sweetalert does not wait for the user's response

swal({title: "Are you sure?", text: "Your form will be submitted", confirmButtonText: "Ok", showConfirmButton:true, showCancelButton: true, cancelButtonText: "No", type:"warning", closeOnConfirm: false, closeOnCancel: false }, ...

Comparison of Uint8Array and Uint8ClampedArray

Can you explain the distinction between Uint8Array and Uint8ClampedArray within JavaScript? I've heard that Uint8ClampedArray is specifically utilized for pixel manipulations on canvas. Could you elaborate on why this array type is recommended for suc ...

Mastering the art of utilizing clearInterval effectively

This reset button needs to clear/reset the timer. The issue is that when the user presses the start button more than once, it sets two timers - one from the previous start and one from the current start. I will be using clearInterval to solve this problem ...

Challenges in Implementing Animated Counters on Mobile Platforms

My website is experiencing a strange issue with an animated counter. The counter works fine on desktop browsers, but when viewed on mobile devices in a live setting, it seems to have trouble parsing or converting numbers above 999. This results in the init ...

What are the steps to compile Sencha Touch using sencha-touch.jsb3?

I've been working on modifying the bundled sencha-touch.jsb3 file in an effort to decrease the size of the framework code. Here's what I've done so far: First, I downloaded the Sencha SDK Tools from I then made edits to SenchaTouch/sen ...