vm.attribute против this.attribute

Question

Это может быть простой вопрос, но я чувствую, что мне нужно кое-что прояснить ... У меня vuejs запущен на одной странице моего сайта. Приложение vm работает в скрипте нижнего колонтитула страницы (я не использую файл app.js или шаблоны / компоненты и т. Д.)

Внутри одного из моих методов Vue это прекрасно работает:

newContainer(){
   this.attribute = 'value'; //this works!
}

Я также использую axios, и внутри его функций я должен сделать это вместо:

axios.post('my/route', {
        attribute: this.attribute //this works
    }).then(function (response) {
        vm.attribute = 'value'; //this works
        this.attribute = 'value'; //this does not work
    });

Я понимаю, что это возможно из-за того, что функция 1009 * не работает, а vm.attribute работает. Однако ... почему это так и есть ли лучший способ сделать это?

Answer 1

Если вы используете функции со стрелками, такие как () => {...}, это привязывает текущий контекст. И this будет указывать на правильный контекст. Так что если вы используете его вместо function() {...}, когда контекст не связан, он будет работать. Как

.then(response => {this.attribute = 'value'}

Answer 2

Это действительно распространенный камень преткновения для разработчиков. Причина в том, что внутри функции axios ваш код находится вне области объекта, содержащего вызов метода axios. Это может быть легче увидеть, если вы переписываете этот блок кода так, как если бы он был ниже:

 var vm = {
      function doWork(){
        axios.post('my/route', {
              attribute: this.attribute //this works
        }).then(function (response) {
              vm.attribute = 'value'; //this works
              this.attribute = 'value'; //this does not work
         });
      }
 }

функционально эквивалентно:

 var vm = {
      function doWork(){
          axios.post('my/route', {
                attribute: this.attribute //this works
           }).then(followOnWork(response));
      }
 }

 function followOnWork(response){
      vm.attribute = 'value'; //this works
      this.attribute = 'value'; //this does not work
 }

Как вы можете видеть в этом переработанном коде, followOnWork работает полностью независимо от объекта vm. Поэтому любое использование переменной this в followOnWork не будет относиться к объекту vm. Где vm - это фактическое имя объекта, и после создания объекта к нему можно получить доступ из в любом месте через переменную vm.

Вы можете обойти эту проблему "вне области видимости", используя функцию стрелки (как упомянуто @MakarovSergey), если ES6 - вариант для вас.

Answer 3

Вы можете увидеть следующее после кода

    export default{
        data(){
            return{
                title:"Form Register",
                formdata:{},
                message:"",
                success:0,
            }
        },
        methods:{
           register(){
                this.axios.post("http://localhost:8888/form-register",this.formdata).then((response) => {
                       console.log(response);
                       if(response.data.success>0){
                           this.message="You register success";
                           this.success=response.data.success;
                       }
                       else{
                           this.message="Register to failed";
                           this.success=response.data.success;
                       }
                  });
                    
            },
 
        }
    }