Updating a boolean value from true to false within a Vue component while making an Axios API request

Question

Updating a boolean value from true to false within a Vue component while making an Axios API request

My Vue.js and Axios setup involves making an API call, where I aim to temporarily change the value of a variable from false to true using SetTimeout. However, there seems to be an issue with Vue not responding unless the variable name is hard coded.

Within my template

<i v-if="fnameEntered" id="fnameCheckPlacement" class="fnameCheck form-control-feedback glyphicon glyphicon-ok" style="margin-right: 10%;"></i>

And in my script

  methods: {
            submitFirstName: function(event){
                this.updateUserInfo(this.fname, "fname", this.fnameEntered);
            },
            updateUserInfo: function (val, field, checkMark) {
                axios.post('/userprofilepage', {
                    val: val,
                    field: field
                })
                    .then(response => {
                        let self = this;
                        setTimeout(function() {

                            self.checkMark = false;
                        }, 2000);
                        this.checkMark = true;
                    })
                    .catch(error => {
                        console.log(error);
                    })
                    .finally(() => this.loading = false)
            },
        }

I am attempting to pass this.fnameEntered as the checkMark variable into updateUserInfo. When I explicitly set this.fnameEntered = true and this.fnameEntered = false, it works as expected.

However, when trying to use "this.checkMark" or "self.checkMark," nothing happens. What am I missing?

javascript vue.js axios

Answer 1

Answer №1

Your update issue may be due to passing a primitive boolean data type in JavaScript, which is always passed by value and not by reference. There are two solutions you can try:

Utilize this.fnameEntered within your method
Transform this.fnameEntered into an object like
```
this.fnameEntered = { value: false}
```
, then utilize checkMark.value = true within your method

Answer 2

Your update issue may be due to passing a primitive boolean data type in JavaScript, which is always passed by value and not by reference. There are two solutions you can try:

Utilize this.fnameEntered within your method
Transform this.fnameEntered into an object like
```
this.fnameEntered = { value: false}
```
, then utilize checkMark.value = true within your method

Answer 3

Answer №2

It's unlikely to succeed. Passing this.fnameEntered into the method call means you lose reference to the original property fnameEntered, retaining only a snapshot of its value at the time of invocation. Additionally, both this.checkMark and self.checkMark seek a fixed property name checkMark, distinct from the variable name checkMark.

To access the dynamic property name's value, take these steps:
1. Provide the desired property name as a string.
2. Retrieve the value by using this name.

The process should resemble this:

methods: {
    submitFirstName: function(event){
        this.updateUserInfo(this.fname, "fname", "fnameEntered");
    },
    updateUserInfo: function (val, field, propertyName) {
        axios.post('/userprofilepage', {
            val: val,
            field: field
        })
            .then(response => {
                let self = this;
                setTimeout(function() {

                    self.$data[propertyName] = false;
                }, 2000);
                this.$data[propertyName] = true;
            })
            .catch(error => {
                console.log(error);
            })
            .finally(() => this.loading = false)
    }
}

Answer 4

It's unlikely to succeed. Passing this.fnameEntered into the method call means you lose reference to the original property fnameEntered, retaining only a snapshot of its value at the time of invocation. Additionally, both this.checkMark and self.checkMark seek a fixed property name checkMark, distinct from the variable name checkMark.

To access the dynamic property name's value, take these steps:
1. Provide the desired property name as a string.
2. Retrieve the value by using this name.

The process should resemble this:

methods: {
    submitFirstName: function(event){
        this.updateUserInfo(this.fname, "fname", "fnameEntered");
    },
    updateUserInfo: function (val, field, propertyName) {
        axios.post('/userprofilepage', {
            val: val,
            field: field
        })
            .then(response => {
                let self = this;
                setTimeout(function() {

                    self.$data[propertyName] = false;
                }, 2000);
                this.$data[propertyName] = true;
            })
            .catch(error => {
                console.log(error);
            })
            .finally(() => this.loading = false)
    }
}

Updating a boolean value from true to false within a Vue component while making an Axios API request

Answer №1

Answer №2

Similar questions

Is there a way to update the state of App.js based on input from a form submission?

Ways to retrieve a value from a span using the Document Object Model

Using Jquery for a synchronous "Ajax" request doesn't seem to be functioning

What could be causing my Vue code to behave differently than anticipated?

Refreshing a page will disable dark mode

Looking to make some changes to the javascript countdown script

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

Is JavaScript not having an impact on your HTML code?

Use JavaScript to identify and color the intersecting area of two triangles that overlap on a webpage

Executing database queries in a synchronous manner in JavaScript

A more intelligent approach for generating JSON responses using Mysql

How to import a module from the root path using TypeScript in IntelliJ IDEA

Finding the element in the HTML using selenium and Python

Troubleshooting problem with image loading in AngularJS using ng-repeat

Develop interactive applications with React Native by generating N animated values

A method to trigger the opening of a div tag when a button is clicked using Vue.js

Invoke functions within a separate function

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

What is the best way to dynamically incorporate Before After CSS code in Vue?

Bring in all subdirectories dynamically and export them