时间戳

首页 > 解决方案 > 处理 VueJS 范围

javascript - 处理 VueJS 范围

问题描述

我正在处理范围问题，我无法使用let that = this;我想更改变量的解决方法error。这是一个 CODEPEN 示例

HTML

<div id="app" class="container">   
    {{error}}
    <br>
    <button type="button" @click="change()">Change Variable Error</button>
</div>

JS

var demo = new Vue({
    el: '#demo',

    data:{
      error: "a",
      item: {
        foo: function(){
            alert('Change!');
          this.error = "Something went wrong!";
        }
    }
    },
    methods:{
        change(){
        this.item.foo();
      }
    }
});

谢谢！

标签： javascriptvue.jsvuejs2

解决方案

这不是 vue 问题，而是 javascript "THIS" 问题。您可以在方法中使用此代码获得所需的内容。

change() {
    this.item.foo.bind(this)();
}

在函数 foo 中，有this.error. 但这this并不局限于 vue 实例的范围。因此，您应该在调用之前将其绑定到此范围内。

另外，我不建议您改变数据属性中的状态。它可能是反模式。

推荐阅读