I want to utilize this.prev and this.curr in the mounted cycle, incorporating the updated changes from the watcher. How do I access these current values in the mounted cycle?
<template>
<component
:is="'nuxt-link'"
:to="{ path: slug, query: { scroll: 'false' } }"
:class="linkClasses"
v-on:click.native="getSelectedFacet($event.target.textContent)"
>
<slot></slot>
</component>
</template>
<script>
export default {
inject: ["filterVariantState"],
props: {
facetKey: {
type: String,
required: true,
},
// other prop definitions...
},
data() {
return {
trackFacets: [],
showAnimation: false,
updatedFacet: null,
updatedFacetKey: null,
prev: {
attributes: [],
name: "",
},
curr: {
attributes: [],
name: "",
},
};
},
computed: {
// computed properties...
},
methods: {
// methods...
},
watch: {
dataObj(newVal, oldVal) {
this.prev = {
attributes: Object.values(oldVal.attributes),
name: this.dataObj.name,
};
this.curr = {
attributes: Object.values(newVal.attributes),
name: this.dataObj.name,
};
},
},
mounted() {
let n = 1;
let queue = [];
for (let i = 1; i <= n; i++) {
let prevFacets = this.prev.attributes;
let currFacets = this.curr.attributes;
console.log("prev", this.prev.attributes);
console.log("curr", this.curr.attributes);
for (let j = 0; j < prevFacets.length; j++) {
queue.push(prevFacets[j]);
}
for (let k = 0; k < currFacets.length; k++) {
queue.push(currFacets[k]);
}
}
// logic for handling animation...
},
};
</script>>
I experimented with placing my mounted content inside the watcher, but the animation only displays briefly as it needs to be managed within the mounted cycle.