In VueJs methods, variables must be properly defined to avoid any errors

When working with VueJs, I came across a situation where I defined an object inside a method. My goal was to then use that object in conjunction with axios like the example below:

data() {
         return {
             name : '',
             password: '',
             email: ''
         }
     },

     methods: {
         submit() {
             const sendData = {
                 name: this.name,
                 password: this.password,
                 email: this.email
             }

             axios.post('http://localhost:8000/api/users', sendData)
             .then(response => {
                 console.log(response);
             })
             .catch(error => {
                 console.log(error)
             })
         }
     }

Upon execution, I encountered the following error message:

ReferenceError: sendData is not defined

Answer №1

The reason for this issue is that the variable sendData has not been declared in the code. To fix this, simply add const before sendData as shown below:

const sendData = {
  name: this.name,
  password: this.password,
  email: this.email
}

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

What is the best way to align the progress bar near the element that initiated the task?

I am currently working on a dynamic website with jQuery, utilizing AJAX operations extensively. Whenever an AJAX operation is initiated, a progress bar is displayed in the center of the webpage. However, I am facing an issue where visitors find it cumbers ...

Preventing flickering when updating UI elements with AngularJS

A website I created showcases a variety of progress bars, each representing the progress of various backend tasks. For example: <div ng-repeat="job in jobs"> <div id="progressbar">...</div> </div> I am using a $resource for the ...

What is the proper method to call an async function as the main function?

I have a series of nodejs scripts that are designed to complete a task and terminate, rather than run continuously. These scripts utilize async functions, like the example below: const mysql = require('mysql2/promise'); ... async function main ...

To achieve proper display of multiple boxes, it is essential for each box to be

My current approach involves adding boxes to the scene based on specific dimensions for height, width, and depth, and it works perfectly when the boxes are all square. https://i.sstatic.net/HdDSX.png However, the issue arises when I try to use a rectangu ...

What is the best way to find out which tab is currently active?

Struggling with Bootstrap 5, I found it challenging to retrieve the activated tab. Even after consulting their documentation, I only managed to obtain the ID of the first button and nothing more. var tabEl = document.querySelector('button[data-bs-t ...

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

Clicking on the button has no effect whatsoever

I'm currently dealing with a button on my webpage that seems to be causing me some trouble: <script> function changeMap() { container.setMap(oMap); } </script> <button onClick="changeMap"> Click here </button> Upon inspe ...

The website is plagued by the presence of unwanted hyperlinks

There seems to be unwanted hyperlinks appearing in the text content on my website. Website URL: http://www.empoweringparents.com/my-child-refuses-to-do-homework-heres-how-to-stop-the-struggle.php# Could you please review the 10th point? There are links b ...

Is it possible for an AJAX request to return both HTML data and execute callback functions simultaneously?

Is it possible to update the content of an HTML div and call a JavaScript function with specific parameters obtained through AJAX after the completion of the AJAX request, all within a single AJAX call? ...

Error message: "Brackets.io extension encounters module does not exist issue"

I am currently working on developing an extension for the Brackets.io editor. My goal is to integrate the trie-search npm module into the project. To accomplish this, I navigated to the local directory of the extension and executed the following command: ...

Guide to adding a line break following each set of 200 characters utilizing jQuery

I have a text input field where I need to enter some data. My requirement is to automatically add a line break after every 200 characters using JavaScript or jQuery. For example: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ...

A guide on retrieving a JSON static file that has been imported using Webpack

I have a JSON static file named someFile.json within my project directory. This JSON file contains a stringified array of objects: [{...},{...},etc] To import it using Webpack (version 4.41.2), I use the following line in my App.js file: import '.. ...

Convert a function into another function when the button is clicked

Hey there, I have an array containing years in my controller: public function getNextYear() { $years = $this->getYears(); foreach ($years as $key => $value) { $y[] = $value + 1; } return $y; } I am displaying this on my ind ...

Retrieve component via route parameter in routes.js

I need the router to display a component based on the parameter in the path. Currently, my routes are set up as follows: const routes = [ { path: "/pages/1", component: () => import("pages/page-1.vue") } ] However, I wo ...

Creating interactive click and model expressions in AngularJS

Within my ng-repeat loop, I am trying to implement the following toggle functionality: <a href='#' ng-model="collapsed{{$index}}" ng-click="collapsed{{$index}}=!collapsed{{$index}}">{{item.type}}</a> <div ng-show="collapsed{{$in ...

What is the proper way to include an external JS file in AngularJS?

As I delve into the world of AngularJS, I have been breaking down code samples and reassembling them in various ways. What specific modifications should be implemented to the code in this plnkr to allow for external script code to be accessed from the inde ...

We encountered an error: Unable to access properties of an undefined variable (referencing 'onClicked')

I am currently in the process of converting my Chrome pure JS extension into a Vue.js version. The pure JS version works perfectly fine. However, when using Vue.js, I encounter an error that I can't seem to understand while loading the extension. Be ...

Reveal a concealed div once the form is submitted and the page is refreshed

I have a hidden div called result_head that should appear as a heading for a form when a button is clicked to provide result options. <div class="result_head" id="result_head" style="display: none"> >Results</div> Here is the form code: & ...

How to handle javascript and json file processing?

My json data structure is as follows: var json = { "A": { "A1": { "A11": "A", "A12": "B", "A13": "C" }, "A2": { "A21": ...

The HTML5 video tag is having trouble playing an .mp4 file that lacks an audio codec

I have been facing an issue while trying to upload a video to an Angular app using ng-file-upload. Everything works properly until I attempt to upload a .mp4 video without any audio codec. The video element appears, shows the correct duration in the contro ...