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

【问题标题】：Error when trying to highlight border color in Vuejs?尝试在 Vuejs 中突出显示边框颜色时出错？
【发布时间】：2021-04-22 12:52:31
【问题描述】：

.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) }" 更改边框颜色

【问题讨论】：

不确定它的实际作用，但您可能不希望在同一个 HTML 元素上有 2 个 v-model。
嗨，我的回答有帮助吗？
@kissu，我已经尝试了代码，但它不起作用。如果可能的话，你能给我一个codeandbox链接吗？使用上面提供的代码。这样它会很有帮助。
通常，OP 会做这种事情，哈哈。努力格式化您的问题，回答它并提供解决方案是我有时会做的事情（很多工作是吧？）但是在这里，我没有您的全部代码，所以如果您做出这种努力，我宁愿这样做。

标签： html css vue.js

【解决方案1】：

你不能有一个在:class 中计算的方法，同时你可以在@input 上调用一个方法（v-on:keypress 实际上在 VueJS 中不存在），并使用 a 的结果computed 或 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
    }
  }
}

【讨论】：