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