javascript - JS vue中如何将返回值放入另一个返回值中

Question

我希望“topic1”成为我的品种名称和 key 的值，但是当我尝试用 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 之后才会存在。函数已运行。

所以当你写{ name: this.topic1 , key: this.topic1 },时其中data您尝试访问名为 topic1 的属性的函数那还不存在。因此，它的值为 undefined 。因此，您正在创建一个相当于 { name: undefined , key: undefined }, 的条目.

此外，没有返回topic1的链接。 。当 topic1 的值时，该对象将不会更新变化。

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

1. data函数将在 created 之前调用钩子(Hook)，所以axios直到data之后才进行调用属性已填充。
2. 安 axios调用是异步的。
3. 使用await可能会使代码更容易阅读，但“等待”大多只是一种幻觉。在等待的 promise 得到解决之前，函数内的其余代码不会运行，但这不会导致函数外部的任何内容等待。 await相当于使用 then .
4. 该组件将在 created 之后渲染称为钩子(Hook)。这是同步的，它不会等待 axios要求。 mounted然后将调用钩子(Hook)，所有这些都在 axios 之前。通话已完成。

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

特别针对 breeds属性(property)你有几个选择。一种是在值加载后注入(inject)值:

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;

另一种方法是使用 computed属性 breeds (为此，您需要将其从 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 时更新变化，因为它是 react 性依赖。

使用 computed在这种情况下， property 可能是最自然的解决方案，但您还可以使用其他技巧来使其发挥作用。

例如，您可以对第一个 Breed 对象中的两个属性使用属性 getters(这是 JavaScript 属性 getters，与 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" },
    ]
  }
},

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