How do I make a button change its step after some point without losing value?

Question

I'm looking to create a button on a webpage that will start having a step of "2" after a certain value.
The JS framework I'm using for the moment is vue.js and here is what I have so far:

<input :step="something >= 5 ? 2 : 1" type="number" >

the : before step is a shorthand for v-bind in vue.js. Now my problem is that once I'm at the value of 5 the step down will be 2 as well, when I want the user to be able to choose 4 without having to go through value 3 then 4.

Alternatively I think I could generate an array of numbers, but I do not know how to introduce a step of 2 in the process.
Something like this [1, 2, 3, 4, 5, 7, 9, 11, 13...]

Answer 1

You could do this programmatically.

Updated to use a watch and also manage 'editing' mode so we alter the value while typing.

<template>
  <div id="app">
    <input :step="1" type="number" v-model="something" @keydown="keydown" />
    {{ editing }}
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      something: 0,
      last: 0,
      editing: false
    };
  },
  methods: {
    keydown(e) {
      this.editing = e.key !== "Enter";
      if (!this.editing) {
        this.validateSomething(Number(this.something));
      }
    },
    validateSomething(v) {
      if (v > 5) {
        if (v % 2 === 0) {
          if (v > this.last) {
            this.something = v + 1;
          } else {
            this.something = v - 1;
          }
        }
      }
      this.last = this.something;
    }
  },
  watch: {
    something: function(newVal, oldVal) {
      console.log(newVal, oldVal);
      let v = Number(newVal);
      if (!this.editing) {
        this.validateSomething(v);
      }
    }
  }
};
</script>

Here's a working codesandbox: https://codesandbox.io/s/mm6x3q60px