Vue

by khamer

HTML

<div id="app">
  <pick :values="FirstNames" :key="seed"></pick>
  <hr>
  <button @click="seed = Math.random()">re-seed</button>
</div>

Vue

Vue.component('pick', {
  template: `<span v-text="value"/>`,
  props: {
    values: Array,
    min: {type: Number, default: 1},
    max: {type: Number, default: 1},
    and: Boolean,
  },
  data: () => ({
    value: null,
  }),
  mounted() {
  	let values = [];
    console.log(this.min, this.max);
    for (let i = this.min - 1; i <= this.max; i++) {
    	values.push(
      	this.values[Math.floor(this.values.length * Math.random())]
      )
      console.log('here', i, values);
    }
    this.value = values.join(', ');
  },
})

const FirstNames = [
  'Kevin', 'Kerri', 'Patrick', 'Jeff',
]

new Vue({
  el: '#app',
  data: {
    FirstNames,
    seed: null,
  },
})