Javascript 如何在JS vue中将返回值放入另一个返回值

我希望“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;
    }
  }
})

---

这里有几个问题

创建相应的Vue实例时，

data

函数只调用一次。在该函数中，您可以通过

this

获取对其Vue实例的引用。此时，一些属性（例如与

道具

相对应的属性）将已经存在。然而，其他人不会

从

数据

返回的对象用于在实例上创建新属性。在本例中，您将创建4个属性：

topic1

、

topic2

、

currentbride

和

brides

。Vue基于返回的对象创建这些属性，因此在运行

data

函数之前，这些属性不会存在

因此，当您在该

数据

函数中编写

{name:this.topic1，key:this.topic1}，

时，您试图访问一个名为

topic1

的属性，该属性尚不存在。因此，它的值将为

未定义

。因此，您正在创建一个相当于

{name:undefined，key:undefined}，

的条目

此外，没有返回到

主题1

的链接。

topic1

的值更改时，该对象不会更新

关于时间安排，还有几点值得注意

数据

函数将在创建

钩子之前调用，因此在填充
数据
属性之前不会进行
axios
调用

axios

调用是异步的

使用

wait

可能会使代码更容易阅读，但“等待”大多只是一种幻觉。函数中的剩余代码在等待的承诺得到解决之前不会运行，但这不会导致函数之外的任何内容等待<代码>等待相当于使用

然后

组件将在调用

created

hook之后渲染。这是同步的，它不会等待

axios

请求。然后在

axios

调用完成之前调用

mounted

钩子

所有这些都意味着您可能需要调整模板以处理

axios

调用尚未完成的情况，因为它将在

topic1

和

topic2

的值可用之前最初呈现

专门针对

品种

属性，您有几个选项。一种是在值加载后注入值：

品种：[
{name:，key:}，//初始值为空
{名称：“德国牧羊犬”，键：“germanshepherd”}，
// ...

const res=wait this.promise；
this.topic1=res.data[0]。趋势；
this.topic2=res.data[1]。趋势；
this.brides[0]。name=this.brides[0]。key=this.topic1；

另一种方法是为

品种
使用
计算的
属性（为此，您可以将其从
数据中删除）：

计算：{
品种（）{
返回[
{name:this.topic1，key:this.topic1}，
{名称：“德国牧羊犬”，键：“germanshepherd”}，
{名称：“赫斯基”，键：“赫斯基”}，
{名称：“帕格”，键：“帕格”}，
{name:“（Error）”，key:“Error”}，
]
}
}

由于我们使用的是
computed
属性，当
topic1
更改时，它将被更新，因为它是一个被动依赖项

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

例如，您可以对第一个繁殖对象中的两个属性使用属性getter（这是JavaScript属性getter，与Vue无关）：

数据（）{
const vm=这个；
返回{
主题1：空，
主题2：空，
当前品种：0，
品种：[
{
获取名称（）{
返回vm.topic1；
},
获取密钥（）{
返回vm.topic1；
}
},
{名称：“德国牧羊犬”，键：“germanshepherd”}，
{名称：“赫斯基”，键：“赫斯基”}，
{名称：“帕格”，键：“帕格”}，
{name:“（Error）”，key:“Error”}，
]
}
},

我不是在为您的用例推荐这种方法，但它是一种有趣的方法，有时可能会很有用。需要注意的关键是，只有在访问属性
name
和
key
时，才评估对
topic1
的依赖性，而不是在执行
数据
函数时。这允许
 topic1
被注册为访问
名称和
键的依赖项，例如在渲染过程中。
我不完全确定你在问什么，但如果你想
包含基于
topic1
的条目，它可能应该是
计算的
属性，而不是
数据
。或者在请求完成后设置
繁殖[0]
的相关属性。非常感谢，它工作得非常好，我可以猜该值仍然为null，但不知道如何注入它。再次感谢