When using Vue.js 1.0, attempting to call one method from another method may result in a 'not a function' error message being

I'm attempting to utilize a function inside another Vue.js method in the following manner:

sendCode: function () {

            this.showSection("SENDING");


            $.ajax({
                url: "someurl" + app.searchResponse.Id,
                type: "POST",
                contentType: "application/json",

                success: function (result) {

                    if (result.Success) {

                        this.showSection("SMS SENT");
                    }
                    else {
                        this.showSection("SMS FAILED");
                    }

                },
                error: function (error) {

                    console.log(error);
                    this.showSection("SMS FAILED");

                }
            });

        },
        showSection: function (section) {

            return app.ui.currentSection = section;
        }

However, I encounter a Type Error stating that this.showSection() is not recognized as a function.

Answer №1

When working with ajax callbacks in Vue, the vue instance this is not accessible due to different scope. To solve this, declare a variable like $this = this before calling the ajax function and then use $this inside the ajax callbacks.

sendCode: function () {

    this.showSection("SENDING");

    var $this = this;

    $.ajax({
        url: "someurl" + app.searchResponse.Id,
        type: "POST",
        contentType: "application/json",

        success: function (result) {

            if (result.Success) {
                $this.showSection("SMS SENT");
            }
            else {
                $this.showSection("SMS FAILED");
            }

        },
        error: function (error) {

            console.log(error);
            $this.showSection("SMS FAILED");

        }
    });

},

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

How can I make either the left or right section remain sticky for a certain period of time?

Can someone help me figure out how to fix a specific section in place temporarily, similar to the example provided below? In the link above, the Apple Watch product stays fixed while the content on the right moves partially, eventually causing the entire ...

What is preventing the scoped styles from loading on a Nuxt page?

In my Nuxt site, I have two separate Freshsales forms as components (formA and formB). I've customized the default form styles with scoped styles within those form components. However, when I use these forms on a page, the scoped styles don't get ...

Enhancing the data picker by incorporating date formatting for improved usability

I have a datepicker set up to display the current date in this format: $(".final-date").text($.datepicker.formatDate('dd.mm.yy', new Date())); This is being used in my loan calculator. I need to figure out how to add days to the current date. F ...

Having trouble connecting to Azure SQL server from my Node.js application

I'm attempting to run a basic query to my Azure SQL server from NodeJs, but I'm encountering errors indicating that I cannot establish a connection to the server. The details provided in my code are correct because I've used them successfull ...

Dealing with asynchronous data using mermaid-js in Angular

Currently, I am engrossed in a project that involves retrieving data from the DB asynchronously and utilizing it to create a sequence diagram using mermaid.js' markdown syntax. Nevertheless, an issue has cropped up where the sequence diagram gets rend ...

Resizing the Canvas in Three.js with GLSL

I'm currently facing challenges with maintaining the proportions when resizing the window to smaller sizes on mobile devices as shown in this CodePen. The lines and interaction become difficult to see on mobile screens. Is there a solution to address ...

Having trouble including a YouTube iframe code within the document ready function

I am having trouble getting the youtube iframe API code to work properly within my $(document).ready() function. When I try to add the code inside the function, the player does not load. However, when I move the code outside of the document.ready, the play ...

Is the term "filter" considered a reserved keyword in Angular, Javascript, or ASP.Net MVC?

When using angularJS to call an ASP.Net MVC controller from a service, I encountered an issue with one of the parameters: $http({ method: "get", url: "ControllerMethod", params: { param1: param1Value, pageNumber: pageNumber, ...

Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

I'm currently using A-Frame version 1.0.4 and have experimented with both spotlights (as shown in the attached image) and direct light sources. Adjusting the shadowBias to -0.0001 only minimally impacts the artifact issue. By setting shadowMapHeight ...

Error: Unable to access the property 'existsSync' since it is undefined - Creating Web Applications using Node.js and Express.js by Ethan Brown - Chapter 13

I am brand new to GitHub and the MEAN (mongodb, express, angular, node.js) stack. I am currently working through a book by Ethan Brown called 'Web Development with Node and Express', and he has provided a Git repository for me to clone and follow ...

Triggering createEffect in SolidJS with an external dependency: A guide

Is there a way to use an external dependency to trigger the createEffect function in Solid, similar to React's useEffect dependency array? I am trying to execute setShowMenu when there is a change in location.pathname. const location = useLocation() ...

What is causing my Mongo database to be unresponsive during my initial request?

In the context of my NodeJS and Mongoose setup, I have two models in my MongoDB: User and Product. My goal is to update a user in both of these models (where a user can have many products and a product has one owner, the user). However, when I make the u ...

Creating nested objects in Javascript involves adding an object inside another object

There are two objects that I have: obj1= { '201609': 52, '201610': 54, '201611': 56, metric: 'promotionsOut', careerLevelGroups: [ { '201609': 52, &a ...

I am interested in utilizing Maven and paulhammant (Selenium_java) to input text into a textefield

When attempting to write in the text field using selenium, I encountered an error stating "unexpected identifier". Any assistance with this issue would be appreciated. See image for more details ...

What is the best way to incorporate images from JSON responses into an HTML document?

I successfully managed to populate an HTML table with the json responses. However, I'm encountering an issue when it comes to displaying the images associated with the json variables. I'm only able to display the URL links for the images. Below ...

performing functions concurrently within angularjs

I am currently utilizing angularjs 1.0 within my application. There is a dropdown on my cshtml page <select tabindex="2" id="Employee" ng-model="models.SelectedEmployee" ng-change="changeEmployee()" disabled="disabled" class="Answer" size="6"> < ...

What is the best way to refresh flexslider after it has been updated via AJAX?

At first, my slider is functional upon loading the page. However, after making an ajax call and receiving new slides to populate the slider, it becomes deactivated (as expected) https://i.sstatic.net/LC0yG.png Is there a method to reinitialize the flexsl ...

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

How to update a ReactJS component based on changing values

As a user, I have a wishlist feature on my website. Whenever I add items to my wishlist, they are stored in the localStorage. I also want to display the total number of items in my wishlist automatically without having to refresh the page. Although the it ...

The chained select feature implemented with a library is not functioning properly when dynamically adding options

While attempting to create a chained select dropdown list, I encountered an issue with the function not working properly. The value of the first select becomes disabled if it is selected for the second time or when the second row of chained select items is ...