CODEWITHSUNDEEP
vue.js
NelieluTu
NelieluTu

Reputation: 39

Vue.js validator isn't showing errors

Here's the prop's validator:

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

here's the data I'm sending:

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

According to the validator I made I shouldn't have it to pass without a warning. And I don't get any warning does anyone knows what I can do to get an error there.

Upvotes: 1

Views: 971

Answers (1)

thanksd
thanksd

Reputation: 55664

You can't put a validator or specify the type of a specific property of a component's prop like you are trying to do.

You can specify the type of the task prop as Object, and then add a validator function to validate the type and value of the task object's id property.

Here's an example:

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>

Upvotes: 1

Related Questions