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

Question

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

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

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

<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>

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

先为了保存吧

第二个用于检查输入的那些键。因此，每当我单击检查按钮时，它都必须调用我的 API 并检查它的状态，如果它 returns 是 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 的新手，我不知道。请任何知道答案的人通过发送代码来实际解释我，以便我能清楚地理解它。

谢谢。

Answer 1

欢迎光临！

对于您的第一个问题，我看到了输入字段，但它们的值未绑定任何内容。最好的办法是使用 v-model 将您的输入绑定到变量：

<div class="vx-form-group">
  <label class="Inpu1">API Key</label>
    <div class="col">
      <vs-input v-model="apiKey" 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-model="secretKey" v-validate="'required|secretKey'" placeholder="Secret Key" name="secretKey" />
    </div>
</div>

并在您的脚本中

<script>
export default{
name:'myComponentName',
data(){
   return{
   apiKey:'',
   secretKey:''
   }
}

这样您就可以使用 this.apiKey 和 this.secretKey 在您的方法中检查值并验证它们。

对于你的第二个问题，我使用 axios 库，它发出 http 请求 easy.I 将假定 $http.post returns 带有数据和状态的响应，如果是这样的话（有人可以纠正我）你可以检查是否 response.status === 401 并以你想要的任何方式处理它。

希望对您有所帮助，编码愉快！

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

Validating buttons and calling API & checking with the status of it

api

status

button

vue.js