Vue.js 满足v-show条件后调用API

在我的应用程序中，如果用户未经身份验证，则会加载登录组件。用户验证后，登录组件将替换为一个表单，该表单将使用API中的数据填充

当页面第一次加载时调用API，并且在用户进行身份验证之前，表单在用户登录后不会获取数据。我想在用户验证后调用API。这是我的密码：

你的帖子已经提交了。
//表单的模板

从“@/components/NavBar.vue”导入导航栏；
从“@/components/Login.vue”导入登录名；
从“axios”导入axios；
从“vuex”导入{mapGetters}；
导出默认值{
名称：“RestaurantEdit”，
组成部分：{
导航栏，
登录，
},
数据（）{
返回{
jsonResponse:[]，
更新响应：[]，
值：[]，
};
},
激活的（）{
this.callAPI（），console.log（“已激活”）；
},
观察：{
$route:“callAPI”，
},
计算：{
…地图绘制者({
已验证：“验证/已验证”，
}),
},
方法：{
updateRestaurant（）{
axios
.放(
“/restaurant/”+this.$route.params.id+“/edit/”，
这个是.json响应
)
.那么(
（回应）=>(
（this.updateResponse=response）、console.log（this.updateResponse）
)
)
.catch（函数（错误）{
console.log（错误）；
});
},
callAPI（）{
（this.updateResponse=[]），
axios
.get（“/restaurant/”+this.$route.params.id+”/edit/”）
.然后（（response）=>（this.jsonResponse=response.data））；
控制台日志（“激活监视”）；
},
},
};

您可以使用或来实现这一点

例如，使用观察者，您可以将观察者添加到

authenticated

computed属性，并根据其状态相应地调用API。以下是您如何做到这一点：

导出默认值{
名称：“RestaurantEdit”，
组成部分：{
导航栏，
登录，
},
数据（）{
返回{
jsonResponse:[]，
更新响应：[]，
值：[]，
};
},
观察：{
已验证（val、oldVal）{
如果（/*检查是否已验证*/）{
这是callAPI（）；
}
}
},
计算：{
…地图绘制者({
已验证：“验证/已验证”，
}),
},
方法：{
updateRestaurant（）{
axios
.放(
“/restaurant/”+this.$route.params.id+“/edit/”，
这个是.json响应
)
.那么(
（回应）=>(
（this.updateResponse=response）、console.log（this.updateResponse）
)
)
.catch（函数（错误）{
console.log（错误）；
});
},
callAPI（）{
（this.updateResponse=[]），
axios
.get（“/restaurant/”+this.$route.params.id+”/edit/”）
.然后（（response）=>（this.jsonResponse=response.data））；
控制台日志（“激活监视”）；
},
},
};

---

对于自定义事件，您需要从组件发出事件。在这种情况下，它将是

组件。当身份验证成功时，您可以使用

this.$emit（'login-success'）

在

组件中发出事件，并且在

组件模板中，您需要像

将手表放在
已验证的
上，而不是
$route
。是否尝试使用async wait？我将在mounted方法中设置第一个api调用，然后在单独的异步方法中设置authenticate方法，并以异步方式登录到。。。然后创建一个新的第三个方法，并在其中调用const authenticate=await authenticate（），然后调用const callApi=await callApi（）作为这两个方法。如果我没弄错你的问题的话，它应该可以工作。我试着使用watcher，但出现了一个错误：“val”已定义但从未使用过已定义“oldVal”，但从未使用过。在文档中，它们不使用新旧值。因此，我不确定是什么导致了错误。请参阅代码，我留下了一条注释
/*检查是否经过身份验证*/
，您可以在其中使用可用的值。我不知道您如何确保用户经过身份验证，请留下空间让您实现。此处
val
是更改后
authenticated
的值，
oldVal
是以前的值。这个错误就是linter告诉您，您只是没有在代码中使用这些变量，所以您应该去掉它们。