HTML 中的 Vue JS 无法识别添加的对象和属性

Question

我有一个名为 myApp 的 Vue 实例。我的 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 插件中看到它。但是输入到我的消息框中的数据没有绑定到每个 findUsers.

有没有我遗漏的东西，或者我忽略的操作顺序？在我添加之前数据中已经存在的任何其他内容都可以绑定。

更新

如果我遵循 Decade Moon 的常规键值对解决方案，其中我根本不改变组件，并完成构建它应该看起来的样子，然后为它赋值，那么它就可以正常工作。如果我尝试分配一个键值对，其中值是另一个包含键值对的对象，那么它仍然不起作用。

Answer 1

myApp.messages 是否在该组件的 data 对象中预先声明？

您似乎在为每封邮件添加 new findUser 属性。 Vue 无法检测到这一点（请参阅 Change Detection Caveats）。在将有效载荷分配给组件之前，您应该 改变有效载荷 （此时 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;
}

HTML 中的 Vue JS 无法识别添加的对象和属性

Vue JS in HTML Not Recognizing Added Objects and Properties

javascript

data-binding

json

vue.js

v-for