我希望“ 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实例。届时，某些属性（例如与props对应的属性）将已经存在。但是，其他人不会。
从data返回的对象用于在实例上创建新属性。在这种情况下，您将创建4个属性：topic1，topic2，currentBreed和breeds。 Vue基于返回的对象创建这些属性，因此直到运行data函数后它们才会存在。
因此，当您在该{ name: this.topic1 , key: this.topic1 },函数中编写data时，您试图访问的属性topic1尚不存在。因此，它将具有undefined的值。因此，您正在创建与{ name: undefined , key: undefined },等效的条目。
此外，没有链接回到topic1。当topic1的值更改时，该对象将不会更新。
值得一提的是关于计时的几点。data函数将在created钩子之前被调用，因此直到填充axios属性之后才进行data调用。axios调用是异步的。
使用await可能会使代码更易于阅读，但“等待”大多只是一种幻想。该函数内的其余代码在等待的诺言得到解决之前不会运行，但这不会导致该函数外的任何事物等待。 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;
另一个方法是对
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更改时，它会被更新，因为它是反应性依赖项。在这种情况下，使用
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" },
]
}
},
我不提倡将这种方法用于您的用例，但这是一种有趣的方法，有时可能很有用。要注意的关键是如何仅在访问属性
topic1和name时而不是在执行key函数时评估对data的依赖性。这允许topic1被注册为访问name和key的依赖项，例如在渲染期间。