Prop passthrough

by skirtle

HTML

<div id="app">
  <h1>Stepper Example working</h1>

  <step key="1" :title="timestamp" ></step>

  <h1>Stepper Example not working</h1>

  <stepper :step="2">
    <step key="1" :title="timestamp" ></step>
    <step key="2" :title="timestamp" ></step>
  </stepper>
</div>

Vue

Vue.component('stepper', {
  template: `
  <div class="stepper-component">
    <transition name="step">
      <slot-component
        v-for="(item, index) in visibleSteps"
        :key="index"
        :vnode="item"
        v-bind="item.$attrs"
        v-on="item.$listeners"
        @nextStep="nextStep()"
      />
    </transition>
  </div>
  `,
  components: {
    SlotComponent: {
      props: {
        vnode: { type: [Object, Array], required: true },
      },
      render () {
        return this.vnode
      }
    }
  },
  props: {
    step: {
      type: Number,
      default: 1
    }
  },
  data: () => ({
    steps: []
  }),
  computed: {
    visibleSteps () {
      return this.steps.filter((el, i) => i === (this.step - 1))
    }
  },
  created () {
    this.steps = this.$slots.default.filter(el => el.tag !== undefined)
  }
});

Vue.component('step', {
  template: '<h3>STEP {{ title }}</h3>',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
});

new Vue({
  el: "#app",
  data() {
      return {
          timestamp: ''
      }
  },
  created() {
    setInterval(this.getNow, 1000);
  },
  methods: {
    getNow: function() {
      const today = new Date();
      const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
      const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
      const dateTime = date +' '+ time;
      this.timestamp = dateTime;
    }
  }
})