vue.jsvalidationvue-props

VueJS - Props Validation passed by type vs value


defineProps({
  firstName: {
    type: String,
    required: true
  },
});
const props = defineProps({
  firstName: String
})

I just want to ask simple question, in the first code it passes an object and give it the appropriate validations, in the second it just does the validation string as expected value for the firstName, so what are the difference between these 2 samples of code ? is it that at the first code you can define multiple validations while you can't in the second block ? is that the only difference ? thanks


Solution

  • It's all the props options

    defineProps({
      firstName: {
        type: String,
        required: true,
        validator(value) {
          // The value must match one of these strings
          return ['success', 'warning', 'danger'].includes(value)
        },
        default: 'success'
      },
    });