为什么在 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.logged时，它打印出正确的值，但是当我点击按钮时，它仍然是默认值。

Answer 1

监听器安装了常规函数，所以this实际上不是你的Vue组件实例。

切换到 arrow function 以自动捕获正确的上下文：

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

为什么在 mounted() 上更新数据时数据没有更新？

Why is the data not updating when I update it on mounted()?

javascript

svg

path

vue.js