gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:50:25 25 4
gpt4 key购买 nike

我有一个名为 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 插件中看到它。但是输入到我的消息框中的数据并未绑定(bind)到每个 findUser

是否有我遗漏的东西,或者我忽略了操作顺序?在我添加之前数据中已经存在的任何其他内容都可以很好地绑定(bind)。

更新

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

最佳答案

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

看起来您正在向每条消息添加一个 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;
}

关于javascript - HTML 中的 Vue JS 无法识别添加的对象和属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47896366/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com