时间戳

首页 > 解决方案 > 尝试在 Vuejs 中突出显示边框颜色时出错？

html - 尝试在 Vuejs 中突出显示边框颜色时出错？

问题描述

.input-section {
  border-radius: 4px;
  width: 359px;
  height: 42px;
  line-height: 42px;
  padding: 0 45px;
  border-radius: 4px;
  border: solid 1px #b1b8c9;
  background-color: #ffffff;
}
<input 
  type="text" 
  name="fullname" 
  id="fullname" 
  v-model="fullname"
  v-model.trim="$v.fullname.$model" 
  :class="{ 'is-invalid': validationStatus($v.fullname) }" 
  class="input-section" 
  v-on:keypress="isLetter($event)" 
  placeholder="Enter your name"
/>

<input 
  class="input-section label-set" 
  type="text" 
  id="mobile" 
  v-model="mobile" 
  v-model.trim="$v.mobile.$model" 
  :class="{ 'is-invalid': validationStatus($v.mobile) }"
  placeholder="Enter your mobile number" 
  v-on:keypress="isMobile($event)"
/>

如何突出输入的边框颜色，如果没有输入数据，即没有输入全名的用户尝试输入手机号码，那么全名的边框应该是红色的。

我们可以根据 :class="{ 'is-invalid': validationStatus($v.fullname) }" 更改边框颜色吗

标签： htmlcssvue.js

解决方案

您不能在 a 中计算方法:class，同时您可以在@input（v-on:keypress实际上在 VueJS 中不存在）调用方法，并使用 acomputed或data类内部的结果。

像这样

<input
  @input="validateStatus"
  :class="{ 'is-invalid': validEmail }"
>

data() {
  return {
    validEmail: false
  }
},
methods: {
  validateStatus(input) { // will be passed automatically from the template
    if (input.value === 'valid') { // your awesome validation
      this.validEmail = true
    } else {
      this.validEmail = false
    }
  }
}

推荐阅读