Vue JS в HTML не распознает добавленные объекты и свойства

У меня есть экземпляр Vue с именем myApp. У меня есть метод в моем экземпляре Vue JS, который называется loadPlannedAlerts, который вызывается во время mounted. Это вызов AJAX, который сначала получает данные JSON, а затем добавляет к ним данные. Данные представляют собой объект JSON с парами ключ-значение, который выглядит примерно так: {key: 'value, key2: 'value2}'.

loadPlannedAlerts: function() {
        $.ajax({
            method: 'GET',
            url: '/get-my-data',
            success: function(data) {
                myApp.messages = JSON.parse(data);
                for (var i = 0; i < myApp.messages.length; i++) {
                    myApp.messages[i].findUser = '';
                }
            }
        });
}

В моем HTML у меня есть цикл v-for, который отображает данные этого сообщения.

<div v-for="(message, index) in messages">
    <input type="text" name="user" v-model="message.findUser">
</div>

По какой-то причине я могу получить добавленный ключ-значение findUser в консоли моего браузера, и я даже могу увидеть его в плагине Vue инструментов разработчика моего браузера. Но данные, которые вводятся в мое окно сообщения, не привязываются к каждому из findUser.

Есть ли что-то, что я упускаю, или порядок операций, который я упускаю из виду? Все остальное, что уже существовало в данных до того, как я их добавил, прекрасно связывается.

ОБНОВЛЕНИЕ

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


javascript json data-binding vue.js v-for
person aCarella    schedule 19.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Объявлено ли myApp.messages заранее в объекте data для этого компонента?

Похоже, вы добавляете новое свойство findUser к каждому сообщению. Vue не может обнаружить это (см. Предупреждения об обнаружении изменений) . Вы должны изменить полезную нагрузку до ее назначения компоненту (после чего Vue сделает ее реактивной).

success: function(data) {
  const messages = JSON.parse(data);

  for (var i = 0; i < messages.length; i++) {
    messages[i].findUser = '';
  }

  // Do this last
  myApp.messages = messages;
}
person Decade Moon    schedule 19.12.2017
comment
Я сейчас не на работе, поэтому не могу проверить, сработает ли это в моей ситуации, но я только что создал небольшой тест, и он действительно сработал. Я попробую это завтра и отмечу этот ответ как принятый, если он сработает. - person aCarella; 20.12.2017
comment
Это решение сработало, но также потерпело неудачу, когда я попытался добавить немного больше. Если я буду следовать этому шаблону и попытаюсь добавить пару ключ-значение, это сработает. Если я попытаюсь добавить ключ со значением, которое является объектом с парами ключ-значение, то он этого не распознает. Не уверен, почему. Если вам нужно разъяснение того, что я имею в виду, я могу обновить свой исходный пост. - person aCarella; 20.12.2017
comment
Это должно сработать. Мне нужно увидеть ваш код и шаблон. - person Decade Moon; 21.12.2017