VueJs-在数据函数中使用模板字符串返回未定义

Question

当我尝试在vuejs的Template strings函数内使用data时，它总是返回undefined任何解决方法的想法吗？

我正在尝试为URL动态调用API

干杯

  data() {
    return {
      baseUrl: `https://example.com/api/json?key=${this.key}`,
      key: "IzNDU2Nzg5MDEyMzQ1Njc"
    };
  }

Answer 1

这是一个JavaScript问题。如果您使用JavaScript运行以下简单示例，则会收到“未定义”错误（在严格模式下运行）。

{ a: `${b}`, b: "123" }
> VM246:1 Uncaught ReferenceError: b is not defined

您不能在对象文字声明中引用相邻的变量（示例中为“键”）。

您可以将Vue.je计算的属性用于baseURL：

computed: {
  baseUrl() {
    return `https://example.com/api/json?key=${this.key}`;
  }
}

Answer 2

不能使data属性动态化。使用如下所示的计算属性：

computed: {
    baseUrl() {
        return `https://example.com/api/json?key=${this.key}`
    }
}