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

自然，它是行不通的。当您将this.fnameEntered传递给方法调用时，您不再拥有对原始属性fnameEntered的引用，仅保留了调用方法时所包含的值的副本。此外，this.checkMark和self.checkMark将检查硬编码属性名checkMark，它与变量名checkMark完全不同。 / p>

如果要检索动态属性名称的值，则需要执行以下操作：
1.以字符串形式传入所需属性的名称。
2.使用传入的属性名称检索值。

这看起来像这样：

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 2

它没有更新，因为您传递的是原始数据类型的布尔值。 JavaScript始终将原始数据类型作为值而不是通过引用传递给函数。有两种方法可以使其正常工作

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

Vue在Axios API调用中将布尔值从true更改为false

2 个答案: