javascript - Vue 在 Axios API 调用中将 bool 从 true 更改为 false

Question

我正在使用 Vue.js 和 Axios 进行 API 调用。当调用返回时，我想暂时将一个为 false 的变量设置为 true。我正在使用 SetTimeout 来执行此操作。我遇到的问题是，除非我对变量名进行硬编码，否则 Vue 不会响应。

在我的模板中

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

然后在我的脚本中

  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)
            },
        }

我试图将 this.fnameEntered 作为变量 checkMark 传递给 updateUserInfo。当我对 this.fnameEntered = true 和 this.fnameEntered = false 进行硬编码时。我得到我想要的结果。

但是，当我尝试使用“this.checkMark”或“self.checkMark”时，没有任何反应。我做错了什么。

Answer 1

它没有更新，因为您传递的是原始数据类型的 bool 值。 JavaScript 总是将原始数据类型作为值而不是引用传递给函数。有两种方法可以让它发挥作用

1. 在你的方法中使用this.fnameEntered
2. 将 this.fnameEntered 更改为 this.fnameEntered = { value: false} 对象，然后在您的内部使用 checkMark.value = true方法