Default values for Vue component props how to check if a user did not set the prop

Question

1  How can I set the default value for a component prop in Vue 2  For example  there is a simple movies component that can be used in this way    lt movies year  2016  gt  lt movies gt     Vue component  movies         props    year         template    movies-template               But  if a user doesn t specify the year    lt movies gt  lt  movies gt    then the component will take some default value for the year prop   2  Also  what is the best way to check if a user did not set the prop  Is this a good way   if  this year    null           do something     or maybe this   if   this year           do something

User · Answer

This is an old question  but regarding the second part of the question - how can you check if the user set didn t set a prop   Inspecting this within the component  we have this  options propsData  If the prop is present here  the user has explicitly set it  default values aren t shown   This is useful in cases where you can t really compare your value to its default  e g  if the prop is a function

User · Answer

Vue allows for you to specify a default prop value and type directly  by making props an object  see  https   vuejs org guide components html Prop-Validation    props      year        default  2016      type  Number         If the wrong type is passed then it throws an error and logs it in the console  here s the fiddle   https   jsfiddle net cexbqe2q

User · Answer

Also something important to add here  in order to set default values for arrays and objects we must use the default function for props  propE          type  Object           Object or array defaults must be returned from          a factory function       default  function              return   message   hello

[javascript] Default values for Vue component props & how to check if a user did not set the prop?

Examples related to javascript

Examples related to vue.js

Examples related to vue-component