如何将 return 值放入 JS vue 中的另一个 return 值

Question

我希望 "topic1" 成为我的品种名称和密钥的值，但是当我尝试用 this.topic1 代替手动输入时，它什么也没显示。

或者有任何其他方法让我的按钮名称与我的检索 API 参数相同，并在我单击它时发送它的名称？

new Vue({
  el: '#app2',
  components: { Async },

  data() {
    return {
      topic1: null,
      topic2: null,

      currentBreed: 0,
      breeds: [
        { name: this.topic1 , key: this.topic1 },
        { name: "German Shepherd", key: "germanshepherd" },
        { name: "Husky", key: "husky" },
        { name: "Pug", key: "pug" },
        { name: "(Error)", key: "error" },
      ]
    }
  },
  async created() {
    try {
      this.promise = axios.get(
        "https://k67r3w45c4.execute-api.ap-southeast-1.amazonaws.com/TwitterTrends"
      );
      const res = await this.promise;
      this.topic1 = res.data[0].Trends;
      this.topic2 = res.data[1].Trends;  
    } catch (e) {
      console.error(e);
    }  
  },

  async mounted () {

  let test = this.topic1;


  },
  computed: {

    breedKey() {
      return this.breeds[this.currentBreed].key;
    }
  }
})

Answer 1

这里有几个问题。

data 函数仅在创建相应的 Vue 实例时调用一次。在该函数中，您可以通过 this 获取对其 Vue 实例的引用。到那时，某些属性（例如对应于 props 的属性）将已经存在。然而，其他人不会。

从 data 返回的对象用于在实例上创建新属性。在本例中，您将创建 4 个属性：topic1、topic2、currentBreed 和 breeds。 Vue 根据返回的对象创建这些属性，因此在 data 函数为运行.

之前它们不会存在

因此，当您在该 data 函数中编写 { name: this.topic1 , key: this.topic1 }, 时，您正试图访问一个名为 topic1 的属性，但它尚不存在。因此它将具有 undefined 的值。因此，您正在创建一个等同于 { name: undefined , key: undefined },.

的条目

再者，没有link回到topic1。 topic1 的值更改时不会更新该对象。

关于时间的几点也值得注意。

data 函数将在 created 挂钩之前被调用，因此 axios 调用直到 data 属性被填充之后才会被调用。
axios 调用是异步的。
使用 await 可能会使代码更易于阅读，但 'waiting' 大多只是一种错觉。在等待的承诺得到解决之前，函数内的剩余代码不会运行，但这不会导致函数外的任何东西等待。 await 等同于使用 then.
组件将在调用 created 挂钩后立即呈现。这是同步的，它不会等待 axios 请求。 mounted 挂钩将在 axios 调用完成之前被调用。

所有这些意味着您可能需要调整模板以处理 axios 调用尚未完成的情况，因为它最初会在 topic1 和 topic2可用。

具体解决 breeds 属性你有几个选择。一种是在值加载后注入值：

breeds: [
  { name: "" , key: "" }, // Initially empty values
  { name: "German Shepherd", key: "germanshepherd" },
  // ...

const res = await this.promise;
this.topic1 = res.data[0].Trends;
this.topic2 = res.data[1].Trends;  
this.breeds[0].name = this.breeds[0].key = this.topic1;

另一种方法是对 breeds 使用 computed 属性（为此，您需要将其从 data 中删除）：

computed: {
  breeds () {
    return [
      { name: this.topic1 , key: this.topic1 },
      { name: "German Shepherd", key: "germanshepherd" },
      { name: "Husky", key: "husky" },
      { name: "Pug", key: "pug" },
      { name: "(Error)", key: "error" },
    ]
  }
}

因为我们正在使用 computed 属性它会在 topic1 发生变化时更新，因为它是一个反应性依赖项。

在这种情况下，使用 computed 属性可能是最自然的解决方案，但您还可以使用其他技巧来实现这一点。

例如，您可以对第一个品种对象中的两个属性使用属性吸气剂（即 JavaScript 属性吸气剂，与 Vue 无关）：

data () {
  const vm = this;

  return {
    topic1: null,
    topic2: null,

    currentBreed: 0,
    breeds: [
      {
        get name () {
          return vm.topic1;
        },

        get key () {
          return vm.topic1;
        }
      },
      { name: "German Shepherd", key: "germanshepherd" },
      { name: "Husky", key: "husky" },
      { name: "Pug", key: "pug" },
      { name: "(Error)", key: "error" },
    ]
  }
},

我不是在为您的用例提倡这种方法，但这是一种有趣的方法，有时很有用。需要注意的关键是如何仅在访问属性 name 和 key 时评估对 topic1 的依赖性，而不是在执行 data 函数时。这允许 topic1 被注册为任何正在访问 name 和 key 的依赖项，例如渲染期间。

如何将 return 值放入 JS vue 中的另一个 return 值

How to put return value into another return value in JS vue

javascript

return-value

vue.js