Еще один отличный пост! Спасибо за помощь.

ного запутался, когда использовать слово "this" в vue.js. Например, в приведенном ниже коде везде я использую «vm» вместо «this», код не работает.

Я также видел несколько примеров использования «я», однако я не гуру javascript, и это действительно сбивает с толку.

var vm = new Vue({
        el: '#app',
        data: {
            tickets: [],
            top: 100,
            search: '',
            showAdd: false,
         },
        mounted: function () {
            this.$nextTick(function () {
                console.log('mounted');
                this.GetTickets(100);
            })
        },
        methods: {
            GetTickets: function (top) {
                axios.get('/api/Tickets', {
                    params: {
                        Top: top
                    }
                })
                    .then(function (response) {
                        vm.tickets = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ClearTicket: function () {
                var t = {
                    "ticketSubject": '',
                    "contactName": '',
                    "createdAt": moment()
                }
                vm.ticket = t;
                vm.showAdd = !vm.showAdd;
            },
            AddTicket: function () {
                //vm.tickets.unshift(vm.ticket);
                axios.post('/api/Tickets', vm.ticket)
                    .then(function (response) {
                        console.log(response);
                        vm.GetTickets(100);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                vm.showAdd = false;

            }
        },

    })
 PatrickSteele07 нояб. 2017 г., 02:41
Я думаю, что это поможет прочитатьэтот ответ оthis ключевое слово и функции / обратные вызовы. Тогда поймите, чтоthis в Vue методыуказывает на экземпляр Vue.

Ответы на вопрос(1)

однако мне кажется, что этот конкретный вопрос заслуживает чуть большего объяснения из-за общей путаницы вthis в общем, и как это следует использовать в Vue конкретно.

Как правило, внутри методов, или вычисляемых свойств или обработчиков жизненного цикла в Vue вы будете использоватьthis для ссылки на компонент, к которому присоединен метод / computed / handler.this относится к контексту, в котором функция выполняется в данный момент.

Где вы попали в беду, используяthis когда новая функция объявляется в контексте текущей функции, как это происходит, когда вы пишете обратный вызов в обещание (axios.post, axios.get). Рассмотрим этот код:

AddTicket: function () {
  // "this", on this line, refers to the Vue
  // and you can safely use "this" to get any of the
  // data properties of the Vue
    axios.post('/api/Tickets', ...)
      .then(function (response) {
        // "this" HERE, does NOT refer to the Vue!!
        // The reason why explained below              
      })
}

В приведенном выше коде первый комментарий может быть заменен кодом, который используетthis чтобы получить свойства данных или вызвать методы Vue (this.tickets). Второй комментарий, однако,внутри новый контекст функции иthis не будет ссылаться на Vue. Это потому, что в Javascript, когда вы объявляете новую функцию, используяfunction() {} синтаксис, эта функция имеет свой собственный контекст функции, которыйразные из функции, в которой он объявлен.

Есть несколько способов справиться с этим в Javascript. Наиболее распространенным в наши дни является использование закрытия для получения правильногоthisили использовать функцию стрелки. Рассмотрим этот код:

AddTicket: function () {
  // As before, "this" here is the Vue
    axios.post('/api/Tickets', ...)
      .then((response) => {
        // "this" HERE is ALSO the Vue
      })
}

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

Другой наиболее распространенный обходной путь - использование замыкания.

AddTicket: function () {
  const self = this // Here we save a reference to the "this" we want
    axios.post('/api/Tickets', ...)
      .then(function(response){
        // and HERE, even though the context has changed, and we can't use
        // "this", we can use the reference we declared (self) which *is*
        // pointing to the Vue
        self.tickets = response
      })
}

Наконец, вы можете использоватьметод связывания создать функцию с определеннымthisхотя в наши дни это не так часто встречается с доступными функциями стрелок.

AddTicket: function () {
    axios.post('/api/Tickets', ...)
      .then(function(response){
        this.tickets = response
      }.bind(this)) // NOTE the ".bind(this)" added to the end of the function here
}

Практически ни в коем случае, если вы действительно делаете то, что делаете в своем вопросе, то есть сохраняете ссылку на Vue в переменнойvm и использовать эту переменнуювнутри сам объект Vue. Это плохая практика.

В любом случае, как правильно использоватьthis подробно рассматривается в многочисленных сообщенияхпо всему интернету а такжездесь, на StackOverflow также.

Наконец, вот код вопроса, пересмотренный так, чтоthis должен быть использованы правильно.

var vm = new Vue({
  el: '#app',
  data: {
    tickets: [],
    top: 100,
    search: '',
    showAdd: false,
    ticket: null
  },
  mounted: function () {
    // there is no need for $nextTick here
    this.GetTickets(100)
  },
  methods: {
    GetTickets: function (top) {
      axios.get('/api/Tickets', { params: { Top: top }})
        .then(response => this.tickets = response.data)
        .catch(error => console.log(error));
    },
    ClearTicket: function () {
      var t = {
        "ticketSubject": '',
        "contactName": '',
        "createdAt": moment()
      }
      this.ticket = t;
      this.showAdd = !this.showAdd;
    },
    AddTicket: function () {
      axios.post('/api/Tickets', this.ticket)
        .then(() => this.GetTickets(100))
        .catch(error => console.log(error));

      this.showAdd = false;
    }
  },
})
 SteveO07 нояб. 2017 г., 04:38
Спасибо. Отличный пост, который действительно проясняет ситуацию.
 Botje07 нояб. 2017 г., 09:55
Очень хороший пост! Может быть, добавить заметку оfn.bind(this) завершить ваше объяснение?

Ваш ответ на вопрос