验证按钮并调用 API 并检查其状态

编程问答 2022-06-02

问题描述

我是 Vuejs 的新手，我想了解有关验证按钮的某些事情。

我使用了两个输入，一个用于 API 密钥，另一个用于 SECRET Key，因此最初用户必须在两个字段中输入密钥。

我的第一个问题是如何验证这一点：

<div class="vx-form-group">
  <label class="Inpu1">API Key</label>
    <div class="col">
      <vs-input v-validate="'required|apiKey'" placeholder="API Key" name="apiKey" />
    </div>
</div>
<div class="vx-form-group" style="margin-bottom: 5%">
  <label class="Input2">Secret Key</label>
    <div class="col">
      <vs-input v-validate="'required|secretKey'" placeholder="Secret Key" name="secretKey" />
    </div>
</div>

我的第二个问题，我使用了两个按钮：

首先为了保存它

用于检查输入的那些键的第二个。因此，每当我单击 CHECK 按钮时，它都必须调用我的 API 并检查它的状态，如果它返回 200，那么我想显示“连接正常”。如果那是 401，那么我想显示“连接不正常”。

这是我尝试的方法：

<vs-button  class="btn " @click.prevent="apiform" 
  style="margin-right: 2%; ">
   Check
</vs-button>
<vs-button  class="btn">Save</vs-button>
<vs-button  class="close"  
  @click="$refs.modalName.closeModal()" style="margin-left: 2%">Cancel
</vs-button>

//in my script
<script>
  methods: {
    async apiform() {
      const response = await this.$http.post('https://my-api-goes-here',{
        check: this.check
      })
      console.log(response)
      this.keys.push(response)
    }
  }
// If it returns a 200 then it means connection is OK. 
  // If it returns 401 then it means connection is Not ok.
</script>

我是 Vuejs 的新手，我不知道。请知道答案的人请尝试通过发送代码来实际解释我，以便我能够清楚地理解它。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

apiapibuttonbuttonbuttonstatusstatusvue.js