Within my Vue instance, I have a method named `loadPlannedAlerts` that performs an AJAX call to retrieve JSON data. This method is called during the `mounted` lifecycle hook of my Vue JS instance. The retrieved JSON object consists of key-value pairs structured like this: {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 = '';
}
}
});
}
In my HTML, I utilize a `v-for` loop to display this message data.
<div v-for="(message, index) in messages">
<input type="text" name="user" v-model="message.findUser">
</div>
Interestingly, although I can see the added `findUser` key-value pair in my browser's console and Vue plugin dev tools, the data inputted into the message box does not bind correctly to each `findUser` entry.
I am contemplating if there might be any missed details or overlooked order of operations causing this issue. Strangely, existing data binds as expected without any problems after being added.
UPDATE
Upon trying Decade Moon's suggested approach of constructing a regular key-value pair before assigning the value, everything works smoothly. However, when attempting to assign a key-value pair with nested objects holding more key-value pairs, the binding still fails to work.