如何在 vue 2 中正确使用 Veulidate 和 vuex

Question

在下面的代码中，我在输入上使用两种方法来更新状态并应用 vuelidate 验证规则，现在验证规则未正确应用，$v.newEmloyeeName.$dirty get 始终为 true。如何解决这个问题，以便状态得到更新并在输入上应用验证规则？我正在使用 vue 2

<input
  type="text"
  placeholder="Employee Name *"
  @input="setNewEmployeeName; setName()" 
  :value="newEmployeeName">

<div v-if="$v.newEmloyeeName.$dirty">
  <div class="text-danger" role="alert" v-if="!$v.newEmloyeeName.required">
    <small>Employee Name is required</small>
  </div>
</div>
...

<script>
import { required} from 'vuelidate/lib/validators'
import {mapMutations, mapState} from vuex;
export default{
validations: { newEmloyeeName: {required}},
computed: { ...mapState('addemployee',['newEmployeeName'])},
methods:{
  ...mapMutations('addemployee',['setNewEmployeeName']),
  setName(){this.$v.newEmployeeName.$touch()}
}
</script>

Answer 1

v-on 指令接受表达式或回调函数作为事件处理程序。考虑到 click 是一种方法，@click="click" 和 @click="click($event)" 的行为方式相同，后者是明确的。

setNewEmployeeName； setName() 是 JS 表达式，它的行为就像在模板之外进行计算一样； setNewEmployeeName 不会被调用，并且是一个无操作，但它应该提供字段值作为参数。

最好不要在组件的 template 和 script 部分之间分发 JS 代码。相反，它可以是：

@input="setName"

和

setName(event){
  this.setNewEmployeeName(event.target.value);
  this.$v.newEmployeeName.$touch()
}