时间戳

首页 > 解决方案 > 仅当 vuelidate 不报错时，如何在 Vue.js 中添加待办事项？

javascript - 仅当 vuelidate 不报错时，如何在 Vue.js 中添加待办事项？

问题描述

我想做一个简单的操作：

仅当 vuelidate 不抛出一个新的待办事项（道具称为“newTodo”）$v.newTodo.$error

正如您在下面看到的，我在方法中的解决方案是：

addTodo: function(newTodo) {
  if (this.$v.newTodo.$error === false) {
    this.todos.unshift(newTodo);
    this.newTodo = "";
  }
}

防止至少空的 todo 输入被添加到列表中的另一种方法是：

addTodo: function(newTodo) {
  if (!this.newTodo === "") {
    this.todos.unshift(newTodo);
    this.newTodo = "";
  }
}

但显然这一切都行不通。目前，它显示错误消息，但即使不满足 6 个字符的 minLength 要求，我仍然可以添加新的待办事项。

我想知道在哪里以及如何将这种情况告诉我的待办事项。这是完整的相关脚本：

<template>
<header>

<input
  class="todo-input-field"
  type="text"
  placeholder="Add a todo"
  v-model.trim="newTodo"
  :class="{ 'todo-input-warning': $v.newTodo.$error }"
  @keyup.enter="addTodo(newTodo)"
>

<div v-if="!$v.newTodo.$error">
  <p class="todo-input-warning" v-if="!$v.newTodo.minLength">Minimum length is 6 chars!</p>
</div>

</header>
</template>

<script>
...

data() {
return {
  newTodo: ""
}
},
methods: {
addTodo: function(newTodo) {
  if (this.$v.newTodo.$error === false) {
    this.todos.unshift(newTodo);
    this.newTodo = ""
  }
}
},
validations: {
newTodo: {
  required,
  minLength: minLength(6)
  }
}
}
</script>

我希望仅当来自 vuelidate 的 $error 为 false 时才添加待办事项。实际结果是，无论 $error 是 false 还是 true，我都可以添加一个 todo。

标签： javascriptvue.js

解决方案

Vuelidate 似乎很粗糙......这就是我能够完成它的方式 - 只有经过验证，您才能添加项目......

Vue.use(window.vuelidate.default)
const {
  required,
  minLength
} = window.validators

new Vue({
  el: "#app",
  data: {
    text: '',
    addedItems: [],
  },
  validations: {
    text: {
      required,
      minLength: minLength(5)
    }
  },
  methods: {
    status(validation) {
      return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    },
    add(v) {
      if (!v.$invalid) {
        this.addedItems.unshift(v.text.$model);
      }
    }
  }
})
input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate@0.7.4/dist/validators.min.js"></script>

<div id="app">
  <div>
    <div class="error" v-if="!$v.text.minLength">Item must have at least {{$v.text.$params.minLength.min}} letters.</div>
  </div>
  <input v-model="$v.text.$model" :class="status($v.text)">
  <button @click="add($v)">Add</button>
  <h3>Added Items:</h3>
  <ul>
    <li v-for="(item,index) in addedItems">{{ item }}</li>
  </ul>
  <br/><br/><br/>
  <hr/>
  <hr/>
  <h4>Vuelidate Object:</h4>
  <pre>{{ $v }}</pre>
</div>

推荐阅读