Question

我有一个名为myApp的Vue实例。我的Vue JS实例中有一个名为loadPlannedAlerts的方法，它在mounted期间调用。这是一个首先获取JSON数据的AJAX调用，然后再添加到它。数据是一个带有键值对的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的常规键值对的解决方案，我根本不改变组件，并完成它应该看起来的样子，然后为它赋值，然后它工作正常。如果我尝试分配一个键值对，其中值是另一个具有键值对的对象，那么它仍然不起作用。

Answer 1

myApp.messages在该组件的data对象中预先声明了findUser吗？

您似乎在为每条消息添加新 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; }属性。 Vue无法检测到这一点（参见Change Detection Caveats）。您应该在之前改变有效负载，并将其分配给组件（此时Vue会使其成为被动的）。

from selenium.webdriver.common.keys import Keys element = driver.switch_to.active_element element.send_keys(Keys.ESCAPE)

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

1 个答案: