[Vuejs]-Vuejs | Create intermediate component that uses one of the props and propagate all remaining stuff to <button> element

by

0👍

✅

Seems the following can do the trick:

Vue.component('clarified-button', {
  template: `
    <div>
      <button v-bind="$attrs" v-on="$listeners" :disabled="disabled">
        <slot></slot>
      </button>
      <p v-if="!disabled">
        {{ clarification }}
      </p>
    </div>
  `,
  props: ['clarification', 'disabled']
});

new Vue({
  el: '#app',
  template: `
  <div>
    <clarified-button
      :disabled="!canSayHello"
      style="background-color:red"
      clarification="Ready to say hi!"
    >
      Hi!
    </clarified-button>
    
    <br>
    
    <clarified-button
      :disabled="!canSayGoodbye"
      name="the-bye-bye-button"
      clarification="You can say goodbye now"
    >
      Bye!
    </clarified-button>
  </div>
  `,
  data: {
    canSayHello: false,
    canSayGoodbye: true,
  },
});

Note that style and class are not included in $attrs if you use vue2 so a full solution would need an extra bit of work.

Leave a comment