Работа с VueJS Scope

Question

Я имею дело с проблемой объема и не могу использовать обходной путь 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();
      }
    }
});

Спасибо!

Answer 1

Это не проблема, а проблема "ЭТОГО" в JavaScript. Вы можете получить то, что вы хотите с этим кодом в методах.

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

В функции foo есть this.error. Но это this не связано с областью действия экземпляра. Таким образом, вы должны связать это в этой области, прежде чем позвонить.

И, кроме того, я не рекомендую вам изменять состояние в свойстве данных. Это может быть анти-шаблон.