Prop Options

Watch "Prop options" on LinkedIn Learning

While it is more common to use props as an array of strings, it is possible to add prop types and prop default values. This is done by defining the props as an object.

Vue.component('simple-button', {
  props: {
    text: {
      type: String,
      default: 'Click Me'
    },
    type: {
      type: String,
      default: 'primary'
    }
   
  },
  template: `<button class="btn m-1" :class="'btn-'+type">{{ text }}</button>`
})

new Vue({ 
  el: '#app',
  data: {
    buttons: [
      {/* No values */},
      {text: 'No, Click Me', type: 'success'},
      {text: 'Please, Click Me', type: 'danger'}
    ]
  }
})

<div id="app">
  <simple-button 
    v-for="button in buttons" 
    :text="button.text" 
    :type="button.type"
  ></simple-button>
</div>

# Prop Options

Prop Options