Question

这是道具的验证器：

props: {
    task: {
      id: {
        type: Number,
        validator: function(value) {
          if (value < 5) {
            console.log("error");
            return false;
          }
          return true;
        }
      }

这是我发送的数据：

export default {
  name: "tasklist",
  data() {
    return {
      tasks: [
        {
          id: 1}

根据我提出的验证器，我不应该在没有警告的情况下通过验证器。我没有得到任何警告，有人知道我能做些什么来在那里得到错误。

Answer 1

您无法放置validator或指定组件type的特定属性的prop，就像您尝试的那样。

您可以将type道具的task指定为Object，然后添加validator函数以验证task的类型和值对象的id属性。

以下是一个例子：

Vue.component('task', {
  template: `<div>{{ task.name }}</div>`,
  props: {
    task: {
      type: Object,
      validator(task) {
        if (typeof task.id !== 'number') {
          console.error("error: task id should be a number");
          return false;
        }
        
        if (task.id < 5) {
          console.error("error: task id should not be less than 5");
          return false;
        }
      }
    }
  }
})

new Vue({ el: '#app' })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="app">
  <task :task="{ name: 'foo', id: 1 }"></task>
  <task :task="{ name: 'bar', id: '9' }"></task>
  <task :task="{ name: 'baz', id: 6 }"></task>
</div>

Vue.js验证器未显示错误

1 个答案: