Хобрук: Ваш путь к мастерству в программировании

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

Это может быть простой вопрос, но я чувствую, что мне нужно некоторое разъяснение... У меня есть 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
    });

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

javascript vue.js vuejs2
28.06.2018

  • распечатайте это, и вы увидите, что вы находитесь в другой области 28.06.2018
  • Добавьте let vm = this См. stackoverflow.com/questions/47148363/ 28.06.2018

Ответы:


1

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

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

28.06.2018

2

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

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

28.06.2018
  • Спасибо, но это работает только в том случае, если у вас есть одно значение для установки или функция для запуска и т. д. 28.06.2018
  • @AdamLambert не уверен, что понял вопрос, не могли бы вы его прояснить? 29.06.2018

    • 3

    Это очень распространенный камень преткновения для разработчиков. Причина в том, что внутри функции 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 подходит вам.

    29.06.2018
    Новые материалы
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
    LeetCode Проблема 41. Первый пропущенный положительный результат
    LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
    Расистский и сексистский робот, обученный в Интернете
    Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..
    Как я опубликовал свое первое приложение в App Store в 13 лет
    Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..