Gadgety_Euclidean_Sequencer_Web_Interface/components/beat.vue

<template>
  <div class="beat-wrapper">
      <input v-model="divisioni" type="number" min="1" oninput="validity.valid||(value='');">
      <!--- trovare modo per prevenire scrittura di input-->
      <div class="division-wrapper">
        <div class="beat" v-for="j in nDivisioni" :key='j'>
          <div>{{randomColori()}}</div>
          <div class="suddivisione" :style="{'background-color': colore }"></div>
        </div>
    </div>
<!--    <beatMenu></beatMenu>-->
  </div>
</template>
<script>
    export default {
      name: 'beat',
      data() {
        return {
          colore: 'red',
          divisioni: 1
        }
      },
      computed: {
        nDivisioni() {
          var n = parseInt(this.divisioni);
          return isNaN(n) ? 0 : n;
        }
      },
      methods: {
        checkDivisioni: function (){
          console.log("numero dell'input è" + this.nDivisioni)
        },
        randomColori: function (){
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
            }
            console.log(color);
            this.colore = color;
        }
    }
    }
</script>

<style>
  .beat{
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

.active{
  background-color:black;
}

input {
  background:transparent;
  width:100%;
}

.division-wrapper {
  flex:1 1 auto;
  display: flex;
}

.beat {
  height:1em;
  display:flex;
  flex:1 1 auto;
}

.suddivisione{
  flex:1 1 auto;
  border:none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
    padding-left:0.2em;
    color:lightgray;
    border:none;
}
</style>