处理VueJS范围

时间:2018-08-27 15:52:16

标签: javascript vue.js vuejs2

我正在处理范围问题,因此无法使用变通方法let that = this;,我想更改变量error。这里是CODEPEN Example

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();
      }
    }
});

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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

函数foo中有this.error。但是此this并不限于vue实例的范围。因此,在调用之前,应将其绑定在此作用域上。

此外,我不建议您对data属性中的状态进行突变。可能是反模式。