当我在mounted()上更新数据时，为什么数据没有更新

Question

当字符串subtitleURL不是空字符串时，我想更改填充值。当提供subtitleURL值时，我会更改该值，在mounted方法中，console.log似乎很好。

<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.06C0.05 8.42 0.34 6.99 0.92 5.77C1.52 4.55 2.3 3.54 3.26 2.74C4.24 1.92 5.35 1.31 6.59 0.909999C7.85 0.509999 9.14 0.309999 10.46 0.309999C12.36 0.309999 13.86 0.619999 14.96 1.24C16.08 1.84 16.64 2.63 16.64 3.61C16.64 4.13 16.51 4.58 16.25 4.96C15.99 5.34 15.69 5.64 15.35 5.86C14.85 5.56 14.22 5.27 13.46 4.99C12.72 4.69 11.88 4.54 10.94 4.54C9.26 4.54 7.92 5.02 6.92 5.98C5.94 6.94 5.45 8.27 5.45 9.97C5.45 10.89 5.58 11.69 5.84 12.37C6.12 13.03 6.49 13.58 6.95 14.02C7.41 14.44 7.94 14.76 8.54 14.98C9.14 15.18 9.78 15.28 10.46 15.28C10.9 15.28 11.29 15.24 11.63 15.16C11.97 15.08 12.23 14.99 12.41 14.89V12.07H9.2C9.08 11.85 8.96 11.56 8.84 11.2C8.74 10.84 8.69 10.46 8.69 10.06C8.69 9.34 8.85 8.82 9.17 8.5C9.51 8.18 9.94 8.02 10.46 8.02H15.53C16.13 8.02 16.59 8.19 16.91 8.53C17.25 8.85 17.42 9.31 17.42 9.91V16.03Z"
:fill="computedFill"
/>

</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>

当this.subtitleValue为console.log时，它会打印出正确的值，但当我单击按钮时，它仍然具有默认值。

Answer 1

侦听器安装有一个常规函数，因此this实际上不是Vue组件实例。

切换到箭头功能以自动捕获正确的上下文：

chrome.extension.onMessage.addListener(async (message, sender, sendResponse) => {
this.subtitleURL = message.subtitleURL;
})