determine if a set of related values have changed in VueJS - vuejs2

Question

I am very new to VueJS.
From what I've seen there is probably an elegant answer to this. I have a table of records. Clicking on one of them opens a modal and loads that row/record. My code looks like this (made easier to read):
Javascript
app = new Vue({
el: '#app',
data: {
records: [], //keys have no significance
focusRecord: { //this object will in the modal to edit, initialize it
id: '',
firstname: '',
lastname: ''
},
focusRecordInitial: {}
},
created: function(){
//load values in app.records via ajax; this is working fine!
app.records = ajax.response.data; //this is pseudo code :)
},
methods: {
loadRecord: function(record){
app.focusRecord = record; // and this works
app.focusRecordInitial = record;
}
}
});
Html
<tr v-for="record in records">
<td v-on:click="loadRecord(record)">{{ record.id }}</td>
<td>{{ record.firstname }} {{ record.lastname }}</td>
</tr>
What I'm trying to do is really simple: detect if focusRecord has changed after it has been loaded into the modal from a row/record. Ideally another attribute like app.focusRecord.changed that I can reference. I'm thinking this might be a computed field which I'm learning about, but again with Vue there may be a more elegant way. How would I do this?

Answer 1

What you need is to use VueJS watchers : https://v2.vuejs.org/v2/guide/computed.html#Watchers
...
watch : {
focusRecord(newValue, oldValue) {
// Hey my value just changed
}
}
...
Here is another way to do it, however I didn't know what's refers "focusRecordInitial"
new Vue({
el: '#app',
data() {
return {
records: [],
focusRecordIndex: null
}
},
computed : {
focusRecord() {
if (this.focusRecordIndex == null) return null
if (typeof this.records[this.focusRecordIndex] === 'undefined') return null
return this.records[this.focusRecordIndex]
}
},
watch : {
focusRecord(newValue, oldValue) {
alert('Changed !')
}
},
created() {
this.records = [{id: 1, firstname: 'John', lastname: 'Doe'}, {id: 2, firstname: 'Jane', lastname: 'Doe'}, {id: 3, firstname: 'Frank', lastname: 'Doe'}]
},
methods : {
loadRecord(index) {
this.focusRecordIndex = index
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<tr v-for="(record, i) in records">
<td><button #click="loadRecord(i)">{{ record.id }}</button></td>
<td>{{ record.firstname }} {{ record.lastname }}</td>
</tr>
</table>
{{focusRecord}}
</div>

Answer 2

Vue Watchers
Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
Vue JS Watchers
You can do something like this:
app = new Vue({
el: '#app',
data: {
records: [], //keys have no significance
focusRecord: { //this object will in the modal to edit, initialize it
id: '',
firstname: '',
lastname: ''
},
focusRecordInitial: {}
},
created: function(){
//load values in app.records via ajax; this is working fine!
app.records = ajax.response.data; //this is pseudo code :)
},
methods: {
loadRecord: function(record){
app.focusRecord = record; // and this works
app.focusRecordInitial = record;
}
},
watch: {
loadRecord: function () {
alert('Record changed');
}
}
});
You can also check out: Vue JS Computed Properties

Answer 3

You can set up a watcher to react to data changes as:
watch: {
'focusRecord': function(newValue, oldValue) {
/* called whenever there is change in the focusRecord
property in the data option */
console.log(newValue); // this is the updated value
console.log(oldValue); // this is the value before changes
}
}
The key in the watch object is the expression you want to watch for the changes.
The expression is nothing but the dot-delimited paths of the property you want to watch.
Example:
watch: {
'focusRecord': function(newValue, oldValue) {
//do something
},
'focusRecord.firstname': function(newValue, oldValue){
//watch 'firstname' property of focusRecord object
}
}