时间戳

首页 > 解决方案 > 无法使用来自外部组件的事件触发器发出 POST 请求（带数据）

javascript - 无法使用来自外部组件的事件触发器发出 POST 请求（带数据）

问题描述

我正在尝试使用一个组件中的单击事件来触发另一个组件中的方法，到目前为止效果很好......除了应该在我的 POST 请求中传递的数据没有被发送。

但是，当我通过在包含 API 调用方法的组件中调用它来测试它时，它工作正常。

想法？

从 Dashboard .vue 传递的数据 -

// Data to be loaded into s3 bucket
this.s3Data.push([`Longitude: ${this.lng}, Latitude: ${this.lat}, Uncertainty Radius: ${this.uncertainty_radius} meters, Address: ${this.place_name}, Source: TEXT`])
this.s3Data = JSON.parse(JSON.stringify(this.s3Data))

从 Dashboard.vue 调用的方法 -

uploadToS3() {
  axios.post("http://localhost:8080/api/v1/targetLocation/uploadLocationsToS3Bucket", this.s3Data,
      {headers: {'Content-Type': 'application/json'}})
},

来自 Applayout.vue 的方法触发事件 -

HTML

<v-btn @click="uploadDataToS3" outlined dark data-test="end-tracking-button">End Tracking</v-btn>

JS

import Dashboard from "@/pages/Dashboard/desktop/Dashboard.vue";

uploadDataToS3() {
  Dashboard.methods.uploadToS3()
},

标签： javascriptapivue.jsaxios

解决方案

在我看来，最好的解决方案是使用mixins。

您将能够从任何组件调用此方法和其他方法，而无需在组件之间使用 props或进行通信bus。

进一步说明：

如果你想连接到一个 api，这个函数不需要在一个组件上。

如果它是一个由不同组件调用的函数。在我看来，最好的解决方案是在一个 mixins 文件中创建它，并从每个需要它的组件中调用它。

推荐阅读