I am currently developing a Vuejs website that allows users to jot down notes about meetings. Upon loading, the website fetches the meeting notes from the server and displays them. When a user adds new notes and clicks the "Save" button, the text is saved to the server. Once the notes are successfully saved, the Save button is disabled and a message saying "Saved" is displayed. When the user begins typing again, the button is re-enabled and displays "Save." This functionality may seem basic, but I am encountering some challenges with it.
Below are the HTML elements for the textarea and Save button:
<textarea v-model="selectedMeeting.content" ref="meetingContent"></textarea>
<button v-on:click="saveMeeting" v-bind:disabled="meetingSaved">
{{ saveMeetingButton.saveText }}
</button>
Upon initializing my Vue app, I set up the data:
data: {
selectedMeeting: {},
meetings: [],
meetingSaved: true,
saveMeetingButton: {saveText: 'Save Meeting', savedText: 'Saved', disabled: true},
},
During the creation phase, the meeting notes are fetched from the server:
created() {
axios.get('/ajax/meetings')
.then(response => {
this.meetings = response.data;
this.selectedMeeting = this.meetings[0];
this.meetingSaved = true;
});
},
I have a method to save the notes:
methods: {
saveMeeting: function () {
axios.post('/ajax/meetings/' + this.selectedMeeting.id, this.selectedMeeting)
.then(function (response) {
this.selectedMeeting = response.data;
console.log('Now setting meetingSaved to true');
this.meetingSaved = true;
console.log('Done setting meetingSaved to true');
});
},
},
I also have a watcher that triggers whenever there is a change in the text, saving the text immediately (even with every letter typed, which I will refine later). Here is the code snippet:
watch: {
'selectedMeeting.content': function () {
this.meetingSaved = false;
console.log('Changed meeting ', new Date());
this.saveMeeting();
}
},
Upon typing a letter, the log shows:
Changed meeting Tue Dec 04 2018 19:14:43 GMT+0100
Now setting meetingSaved to true
Done setting meetingSaved to true
Although the logs are displayed as expected, the button remains enabled. Removing the watcher causes the button to be disabled at all times. Despite the watcher correctly setting this.meetingSaved to false, and subsequently setting it to true with this.saveMeeting(), the watcher does not seem to disable the button as intended.
Could someone point out what I am doing incorrectly in this scenario?
Edit
For a complete view of the entire page, you can access it here: https://pastebin.com/x4VZvbr5