When the string subtitleURL is not empty, I aim to adjust the fill value. My approach involves updating the value of subtitleURL when one is provided. It appears to log correctly in the mounted method.
<template>
<button class="glottis_button" @click="clickTest">
<svg
width="18"
height="20"
viewBox="0 0 18 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.42 16.03C17.42 16.65 17.31 17.11 17.09 17.41C16.87 17.71 16.52 18 16.04 18.28C15.76 18.44 15.41 18.6 14.99 18.76C14.57 18.9 14.11 19.02 13.61 19.12C13.11 19.24 12.58 19.33 12.02 19.39C11.48 19.45 10.94 19.48 10.4 19.48C8.96 19.48 7.61 19.29 6.35 18.91C5.09 18.51 3.99 17.92 3.05 17.14C2.13 16.34 1.4 15.35 0.86 14.17C0.32 12.99 0.05 11.62 0.05 10.06C...
</svg>
</button>
</template>
<script>
export default {
name: "GlottisRecorder",
data() {
return {
subtitleURL: "",
subtitleArray: [],
clicked: false,
};
},
methods: {
clickTest: function () {
console.log(this.subtitleURL)
}
},
mounted() {
chrome.extension.onMessage.addListener(async function (
message,
sender,
sendResponse
) {
if (
message.tabURL === document.URL &&
this.subtitleURL !== message.subtitleURL
) {
console.log("MESSAGE useeffect", message, sender);
this.subtitleURL = message.subtitleURL;
console.log(this.subtitleURL)
}
});
},
computed: {
computedFill: function () {
console.log(this.subtitleArray.length < 1 ? "#fff" : this.clicked === false ? "#1eb4d4" : "#9ef7b9")
return this.subtitleURL === "" ? "#fff" : this.clicked === false ? "#1eb4d4" : "#9ef7b9";
},
}
};
</script>
Although the value is correct when this.subtitleValue is logged on the console, clicking the button still results in the default value being displayed.