Vue JS - Reactivity $ set свойство в массиве объектов

Question

Vue JS - Reactivity $ set свойство в массиве объектов

1

Версия Vue.js v1.0.28. Мне было интересно, как я могу использовать Vue.$set чтобы установить глубокое свойство массива объектов. Например, у меня есть:

this.pairs = [
    {
        "left_media": {
            "name": "A",
            "show": false
        },
        "right_media": {
            "name": "B",
            "show": false
        }
    },
    {
        "left_media": {
            "name": "B",
            "show": false
        },
        "right_media": {
            "name": "A",
            "show": false
        }
    }
]

Мне нужно пройти через массив this.pairs и обновить свойство show каждого name == A медиа name == A до true.

Я могу легко обновить их с помощью цикла for, но представление не изменится. Я провел некоторое исследование и, похоже, Vue.$set может помочь исправить это, но я не могу заставить его работать в этом случае.

Как использовать $set для выполнения: this.pairs[i].left_media.show = false; ?

РЕДАКТИРОВАТЬ

AJAX призывает обновить show_comment

toggleComment: function(media, which_media) {
  this.$http.post('/api/project-media/update.json', {
    id: media.id,
    show_comment: !media.show_comment
  })
  .then(function (response) {
    if (response.body.success) {
      // update show_comment status for this media in all pairs\
      for (let pair of this.pairs) {
        for (let key of Object.keys(pair)) {
          if (key == 'project_media_left' || key == 'project_media_right') {
            if (pair[key].id == media.id) {
              this.$set(pair[key], 'show_comment', !media.show_comment);
            }
          }
        }
      }
    }
  }, function (response) {
  });
}

nogias 02 июнь 2017, в 06:31

Источник

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Bert · Answer 1 · 2017-06-02T02-30-00.000Z

Если ваша целевая среда поддерживает Object.values или вы используете babel или что-то для компиляции, тогда ее просто

for (let pair of this.pairs)
  for (let v of Object.values(pair))
    if ('A' == v.name) v.show = true

Если нет, тогда

for (let pair of this.pairs)
  for (let key of Object.keys(pair))
    if (pair[key].name == 'A')
      this.$set(pair[key], 'show', true)

Пример.

Но, честно говоря,

for (let pair of this.pairs)
  for (let key of Object.keys(pair))
    if (pair[key].name == prop)
      pair[key].show = true

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

Я попробовал ваши решения. Пара проблем: метод, использующий $ set, сообщает об ошибке Uncaught (in promise) TypeError: t.trim is not a function(…) . Возможно это не установка правильной собственности? Другие методы успешно меняют значение мультимедиа, но это изменение не отображается в браузере.
@nogias Можете ли вы опубликовать код, где вы делаете обновление? Похоже, это в обратном вызове Ajax.
Вы правы, есть звонок AJAX. Я обновил вопрос выше, извините, он немного отличается от моего упрощенного примера выше, но идея та же.
@nogias Где это отличается от вашего? Это похоже на работу. codepen.io/Kradek/pen/YQKjMB?editors=1010
Только что проверил, да без разницы, хотя использование $set всегда выдает ошибку t.trim is not a function... Странно становится.
@nogias Возможно, проблема с версией?
Позвольте мне проверить и обновить Vue, если это необходимо
Моя версия Vue.js v1.0.28, может быть, поэтому?
@nogias вполне может быть. Мой пример в v2.