我有一个表单，在提交过程中，每个表单域都显示红色错误边框。我的要求是我想在焦点事件中删除这些边框。
我想在我的 Vue JS 项目中实现它。我已经安装了 Js 包。
我在“Mounted”函数中编写了我的代码。
mounted: function () {
$("body").on("focus", ".error-border", function () {
$(this).removeClass("error-border")
})
}
【问题讨论】：
我认为你只需要使用 VueJS 数据就可以了。例如，您可以有这样的模板...
<div id="app">
<form action="">
<input type="text" @focus="focused = true" @blur="focused = false">
<p>{{ focused }}</p> // Displaying value to debug
</form>
</div>
...你的 Vue 代码可能看起来像这样
new Vue({
el: "#app",
data() {
return {
focused: false
}
}
})
这是一个fiddle，您可以自己尝试。
使用@focus 将在您的输入获得焦点时触发事件，而@blur 在没有焦点时触发。话虽如此，你可以做任何你想做的事情来改变边框颜色。当focused 改变时，我会使用VueJS watchers 来改变颜色。
对于那部分，我让你看看我上面链接的文档。
【讨论】：
我注意到您正在使用 Body 标记来触发焦点事件以删除 css 类，但是这种行为主要用于输入。
如果你想在焦点事件发生时从元素中删除一个类，你可以使用@focus 指令.. 这里是一个例子：
<script>
new Vue({
el: '#app',
data: {
displayError : true
},
});
</script>
HTML
<div id="app">
<input
@focus="displayError = false"
:class="{'error-border': displayError}” />
</div>
CSS
.error-border {
border: 1px solid red;
}
您可以在计算属性中或作为示例显示该类。
【讨论】：
快速说明： 尝试看看像vuelidate 这样的轻量级验证框架是否对您的代码有帮助。如果表单中有大量输入，表单验证会变得非常混乱。
我创建了这个 fiddle，它让您了解如何使用附加到 v-on:focused 事件的 vue 方法来做到这一点
new Vue({
el: "#app",
data() {
return {
inputError: true
}
},
methods: {
toggleBorder: function(event) {
this.inputError = true
event.target.classList.remove('red-border')
}
}
}).red-border {
border: 1px solid #f00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<form action="">
<input type="text" @focus="toggleBorder" :class="{'red-border': inputError}">
</form>
</div>正如其中一个 cmets 所述，尽量不要将 jQuery 与 vue 值一起使用，因为您经常需要编写额外的逻辑来使两者协同工作
【讨论】：
在 Vue 中直接操作 DOM 几乎从来都不是一个好主意——不是使用 jQuery，也不是使用 vanillaJS。当 Vue 覆盖您更改的部分 DOM 时，您将不可避免地在 Vue 和非 Vue 代码之间发生冲突；并在数据模型与它的 DOM 表示不同步时引入错误。
利用框架：让 Vue 担心 DOM，而专注于组件数据。
处理表单验证的方法有很多种；如果您不想一直到真正的validation library，一个简单的策略是使用计算函数来检查每个输入的有效性：
new Vue({
el: '#app',
data: {
foo: ''
},
computed: {
fooIsInvalid() {
return this.foo === '' // your validation rules here
}
}
});input.invalid {border-color:red}<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<input v-model="foo" :class="{invalid: fooIsInvalid}">
</div>或者，您可以依赖焦点和输入事件来设置数据模型值而不是计算函数：
new Vue({
el: '#app',
data: {
foo: '',
fooIsInvalid: false
},
methods: {
validate() {
this.fooIsInvalid = !!(this.foo === '')
}
}
});input.invalid {border-color: red}<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<input v-model="foo" @focus="validate()" @input="validate()" :class="{invalid: fooIsInvalid}">
</div>另一种方法是Vue Cookbook 建议的方法（基本上是一个“错误”数组，在提交时填充，而不是每个表单字段的单独变量）。或者对于更可重用的方法，您可以构建自己的输入字段组件，根据其 v-model 设置自己的“isValid”变量（尽管此时您基本上是在重新发明现有的验证库，并且可能应该只使用现有的代码.)
【讨论】：