After adding multiple components to a page, I noticed that updates made to a parent object are reflected in one component but not the other.
The main page, PatientEditor.vue, includes the following components:
<notes-editor v-model="pt" />
<chart-completion v-model="pt" arrange="horiz" />
and contains this script:
module.exports = {
props: ["pt"]
};
Therefore, the pt object resides within the parent and is passed to various components as a v-model.
One of the components, ChartCompletion.vue, functions correctly with the following code snippet:
module.exports = {
props: ["value", "arrange"],
computed: {
completed_notes: function() {
return this.value.notes.filter(function(note) {
return note.signed_at;
}).length;
},
However, the problematic child seems to be the NotesEditor.vue template which includes the following structure:
module.exports = {
props: ["value"],
computed: {
completed_notes: function() {
return this.value.notes.filter(function(note) {
return note.signed_at;
}).length;
}
},
It might not be crucial, but the notes object is populated from an ajax call in another component like so:
this.value.notes.splice(0, this.value.notes.length, ...response.body.notes);
this.$emit("input", this.value);
Consequently, when changes are made to this.value.notes, they reflect properly in the ChartCompletion component but not in the NotesEditor component. Upon inspecting the Vue debugger in Chrome, it's evident that the notes object undergoes modifications. However, for some reason, the computed property fails to recompute, despite having the exact definition in the ChartCompletion component. Furthermore, the v-for present in NotesEditor also remains unchanged.
What would be the best approach for debugging this issue?
EDIT 1 - addition of the NotesEditor component
<template>
<span>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Status</th>
<th>Audio</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr v-for="n in value.notes" :key="n.id">
<th>{{n.created_at}}</th>
<td>{{n.note_status_id}}</td>
<td>
<span v-if="n.audio_length > 0">
<audio controls="controls" preload="none">
<source :src="audioURL(n.id)" type="audio/webm"> Your browser does not support the audio element.
</audio>
({{n.audio_length}}s)
</span>
<span v-else>
None
</span>
</td>
<td>
<span v-if="n.note_text">
<button data-toggle="tooltip" :title="n.note_text" class="btn btn-outline-primary btn-sm" @click.prevent="openChartEditor(n.id)">
<span class="glyphicon glyphicon-edit"></span> Edit Note ({{ n.note_text.length }} chars)
</button>
</span>
<span v-else>
<button class="btn btn-primary btn-sm" @click.prevent="openChartEditor(n.id)">
<span class="glyphicon glyphicon-pencil"></span> Create Note
</button>
</span>
</td>
</tr>
<tr>
<td colspan="3">
<record v-model="value" />
</td>
<td>
<button class="btn btn-primary" @click.prevent="openChartEditor(0)">
<span class="glyphicon glyphicon-pencil"></span> Create Note
</button>
</td>
</tr>
</tbody>
</table>
</span>
</template>
<script>
module.exports = {
props: ["value"],
data: function() {
return {
sendFaxWorking: false
};
},
computed: {
completed_notes: function() {
return this.value.notes.filter(function(note) {
return note.signed_at;
}).length;
}
},
methods: {
audioURL: function(id) {
return "/notes/getAudio/" + id;
},
openChartEditor: function(id) {
this.$root.$emit("showEditor", id);
}
}
};