Блог

Я новичок в Vuejs и хочу знать некоторые вещи о проверке кнопок.

Я использовал два входа, один для ключа API, а другой для СЕКРЕТНОГО ключа, поэтому изначально пользователь должен ввести ключи в оба поля.

Мой первый вопрос: как мне это проверить:

 <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 и проверять его статус, если он возвращает 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, понятия не имею. Пожалуйста, любой, кто знает ответ, пожалуйста, попробуйте объяснить мне практически, отправив код, чтобы я мог его четко понять.

Спасибо.

Добро пожаловать!

На ваш первый вопрос я вижу поля ввода, но их значения ни к чему не привязаны. Лучше всего привязать ваши входные данные к переменным, используя v-model as so:

 <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-запросы.Я предполагаю, что $ http.post возвращает ответ с данными и статусом, если это так (кто-то может меня поправить), вы можете проверить, является ли response.status === 401 и обработать его любым удобным для вас способом.

Надеюсь, это поможет, счастливого кодирования!