Utilizing Vue 2 and Axios to toggle visibility of a div based on the response of an Axios request

Question

Utilizing Vue 2 and Axios to toggle visibility of a div based on the response of an Axios request

I have a div on my website

<div class="ui-alert" v-show="isCaptchaError"> ... </div>

The variable isCaptchaError is initialized in my Vue instance:

const form = new Vue({
    el: '#main-form',
    data: {
        isCaptchaError: false,
    },

In a watcher for my input field, I make an axios request and set this.isCaptchaError to true

const form = new Vue({
    el: '#main-form',
...
    watch: {
        phoneNumber(val) {
                        axios({
                            method: 'post',
                            url: '/rest/client',
                            data: ajaxRequest
                        }).then(function (response) {
                            this.isCaptchaError = true;
                        })
        }
    }

However, the div does not show. If I manually set this.isCaptchaError to true on a button click, the div displays as expected

How can I toggle the visibility of the div based on the result of the axios request?

javascript vue.js vuejs2 axios

Answer 1

Answer №1

Here is a solution you can test out:

async phoneNumber(val) {
  const response = await axios({
    method: 'post',
    url: '/rest/client',
    data: ajaxRequest
  })
  this.isCaptchaError = true
}

It seems like there may be some confusion with the variables val and response in the provided code snippet. However, the code should still function properly. Make any necessary adjustments with additional information or error messages if needed.

For further reference, the documentation page is a valuable resource.

Answer 2

Here is a solution you can test out:

async phoneNumber(val) {
  const response = await axios({
    method: 'post',
    url: '/rest/client',
    data: ajaxRequest
  })
  this.isCaptchaError = true
}

It seems like there may be some confusion with the variables val and response in the provided code snippet. However, the code should still function properly. Make any necessary adjustments with additional information or error messages if needed.

For further reference, the documentation page is a valuable resource.

Utilizing Vue 2 and Axios to toggle visibility of a div based on the response of an Axios request

Answer №1

Similar questions

Is there a way for me to properly initiate the Material UI Modal from the parent component?

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

Establishing a link between numerous web browsers solely through client-side technology

Failure to pass a variable declared within a function to another JavaScript file running simultaneously

Using Vue JS to handle image upload with "PROP MUTATING"

Error 404 in NodeJS: Page Not Found

The state value is not preserved after redirecting to another page

Using JavaScript within SQL allows developers to combine the power

Accessing an array outside of an Ajax call that was initiated within a success callback

Problem with custom anchor component in React that needs to perform an action before being clicked

Unable to create the complete PDF file using html-pdf in a NodeJS environment

The issue with Lodash isEqual arises from the constructor specified by Angular

Attempting to verify the existence of a value in an SQL table prior to insertion

Grin schedule module JSON stream

Initiate the function one time

Employing lodash for object comparison and removal from an array

Async reaction in MobX is a powerful tool for handling

Jest may come across test suites, but it discreetly disregards the individual tests

How can I effectively link my React admin frontend to my Nodejs/Express backend for optimal connectivity?

How can one get rid of a sudden strong beginning?