Вычисляемые свойства не обновляются при использовании Lodash и Vuejs

Текущий проект, над которым я работаю, широко использует vuejs, и я пытаюсь использовать Lodash для доступа к некоторым базовым вспомогательным функциям массива. На простой кнопке стиля "лайк" в шаблоне vue есть следующее:

<button class="btn btn-xs" v-bind:class="appreciated" v-on:click="toggleAppreciate()"><i class="fa fa-heart"></i> Appreciate</button>

Вычисленное свойство выглядит так:

appreciated: function()
{
    return _.indexOf(this.global.userAppreciates, this.entity_id) > -1 ? 'btn-primary' : 'btn-default'
}

Нажатие на кнопку отправляет простой запрос ajax, и сервер отвечает статусом переключения «добавлено» или «удалено». Я использую следующий код, чтобы изменить набор «ценителей»:

if (response.data.type === 'added')
{
    return this.global.userAppreciates.push(this.entity_id)
}

return _.pull(this.global.userAppreciates, this.entity_id)

Добавленный метод, использующий простой javascript, работает нормально. Просмотр vuetools показывает, что количество элементов в userAppreciates было обновлено, и кнопка действительно меняет состояние. Однако - использование метода Lodash _.pull для удаления элемента из массива не переключает состояние вычисленного свойства, даже если элемент удален из хранилища. Однако если я использую простой javascript и делаю что-то вроде этого:

let index = this.global.userAppreciates.indexOf(this.entity_id)
this.global.userAppreciates.splice(index, 1)

Хранилище также обновляется, но вычисленное свойство действительно меняет состояние, а класс кнопки изменяется.

Есть ли что-то особенное в том, как Lodash обрабатывает эти методы, что заставляет Vuejs не улавливать изменение свойства? Приветствуются любые разъяснения.


person Bryan Dease    schedule 07.02.2017    source источник


Ответы (1)


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

  • толкать()
  • поп ()
  • сдвиг()
  • unshift ()
  • сращивание ()
  • Сортировать()
  • задний ход()

Я предлагаю использовать вышеуказанные методы и реализовать _.pull, используя вышеуказанные методы, которые должны вызывать compluted.

person Saurabh    schedule 07.02.2017