I need to use this.prev and this.curr in the mounted cycle, with the updated changes from the watcher. How can I access these up to date 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,
},
facet: {
type: String | undefined,
required: true,
},
selectedFacets: {
type: Object,
required: true,
},
selectedFacet: {
type: String,
required: false,
},
results: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
trackFacets: [],
showAnimation: false,
updatedFacet: null,
updatedFacetKey: null,
prev: {
attributes: [],
name: "",
},
curr: {
attributes: [],
name: "",
},
};
},
computed: {
// Get data object from store
dataObj() {
return this.$store.getters["page/data"];
},
// Get Previous and Current Facets from store
storedFacets() {
return this.$store.getters["page/facets"];
},
// Get Selected Facets
storedSelectedFacet() {
return this.$store.getters["page/selectedFacet"];
},
facets() {
let currentFacet = {};
currentFacet[this.facetKey] = this.facet;
return Object.assign({}, this.selectedFacets, currentFacet);
},
// Check if product is availble
productIsAvailable() {
return this.productAvailability ? true : false;
},
// Computes the slug of each facet
slug() {
let result;
if (!this.filterVariantState.clearAll && this.results.length > 2) {
result = this.results.find((x) => {
return Object.keys(this.facets).every((facet) => {
return (x[facet] ? x[facet].raw : null) === this.facets[facet];
});
});
}
let productSlug = result ? result.slug.raw : "";
if (productSlug === "") {
result = this.results.find(
(x) =>
x[this.facetKey] &&
x[this.facetKey].raw === this.facets[this.facetKey]
);
}
return result ? result.slug.raw : "";
},
// Computes product availability
productAvailability() {
let result =
!this.filterVariantState.clearAll && this.results.length > 2
? this.results.find((x) => {
return Object.keys(this.facets).every((facet) => {
return (x[facet] ? x[facet].raw : null) === this.facets[facet];
});
})
: this.results.find(
(x) =>
x[this.facetKey] &&
x[this.facetKey].raw === this.facets[this.facetKey]
);
return result ? result.slug.raw : "";
},
// Current selected variant
currentVariant() {
return this.selectedFacet === this.facet;
},
// Link Classes
linkClasses() {
return {
"bg-gray-100 text-gray-400": !this.productIsAvailable,
"text-gray-900": this.productIsAvailable,
pulse: this.showAnimation && this.currentVariant,
};
},
animationIsTrue() {
return showAnimation ? true : false;
},
},
methods: {
// Get facetKey from value // Adjust styling for styling detector for storage as it entered into the backend off
getKeyByValue(object, value) {
return Object.keys(object).find((key) =>
key === "storage"
? object[key].replaceAll(" ", "") === value
: object[key] === value
);
},
// This method gets you the facetKey that is NOT changed when you click on a faded option and your selection has been changed
getUnchangedKey() {
// Get two arrays of facetKeys
let result = this.storedFacets.map((value) =>
value.attributes.map((attribute) =>
this.getKeyByValue(this.dataObj.attributes, attribute)
)
);
// Need the last two results to continue
if (result.length === 2) {
// Remove sim and network from the arrays
result[0] = result[0].filter(
(str) => str !== "sim" && str !== "network"
);
result[1] = result[1].filter(
(str) => str !== "sim" && str !== "network"
);
let unchangedKey = [];
// Compare the two arrays, if there is a matching facetKey, it means it has not changed and so we will not fire the text for that facetKey
for (let i = 0; i < result[0].length; i++) {
for (let j = 0; j < result[1].length; j++) {
if (result[0][i] === result[1][j]) {
unchangedKey.push(result[0][i]);
}
}
}
return unchangedKey ? unchangedKey : "";
}
},
// Get selected facet value on click
getSelectedFacet(value) {
// Set the value found in the $event click
this.updatedFacet = value.trim().toLowerCase();
// Dispatch the getSelectedFacets action and pass through the facet value that has just been selected/clicked
this.$store.dispatch("page/getSelectedFacet", this.updatedFacet);
},
},
watch: {
dataObj(newVal, oldVal) {
// this.fetchFacets();
this.prev = {
attributes: Object.values(oldVal.attributes),
name: this.dataObj.name,
};
this.curr = {
attributes: Object.values(newVal.attributes),
name: this.dataObj.name,
};
},
},
mounted() {
// Conditionally show pulse animation
let n = 1;
let queue = [];
// let namesQueue = [];
// Loop through both arrays and join them create one array
for (let i = 1; i <= n; i++) {
let prevFacets = this.prev.attributes;
let currFacets = this.curr.attributes;
// let prevProductName = this.prev.name;
// let currProductName = this.curr.name;
console.log("prev", this.prev.attributes);
console.log("curr", this.curr.attributes);
// namesQueue.push(prevProductName, currProductName);
// Loop through prev facets
for (let j = 0; j < prevFacets.length; j++) {
queue.push(prevFacets[j]);
}
// Loop through current facets
for (let k = 0; k < currFacets.length; k++) {
queue.push(currFacets[k]);
}
}
// Loop through joint array and check for no duplicates
for (let i = 0; i < queue.length; i++) {
for (let j = i + 1; j < queue.length; j++) {
if (queue[i] === queue[j]) {
queue.splice(i, 1); // Remove the element at index i
queue.splice(j - 1, 1); // Remove the element at index j (adjusted after removing i)
i--; // Adjust i since the array has been modified
break; // Restart checking from the new i position
}
}
}
// The queue removes any duplicates
// So, if there is only pair of facets left (length === 2), then turn off the animation as only the selected facet has changed
if (queue.length === 2) {
this.showAnimation = false;
// Else if, they are multiple pairs of changes and the product is still the same, then turn on the animation as the facet options have changed, and also, alert the changing text
} else if (queue.length > 2) {
this.showAnimation = true;
// Conditionally show updated label
// Find key based on the value of the selected facet found in storedSelectedFacets
this.updatedFacetKey = this.getKeyByValue(
this.dataObj.attributes,
this.storedSelectedFacet
);
// Pass the facet key to ProductVariantFilter to trigger the "update" label
this.$emit("updatedFacetOptions", {
facetKey: this.updatedFacetKey,
// Get unchanged facetKey, if there is one
unchangedFacetKey: this.getUnchangedKey(),
});
}
},
};
</script>
I tried putting my mounted content in the watcher, but i only see my animation for a second because it has to be handled in the mounted cycle
