[Vuejs]-Show formatted value of v-model on input field

by

0👍

Here the working code. I implemented using computed.

<script setup>
import { ref, computed } from 'vue';

const minutes = ref(0);

const displayTime = computed(() => {
  if (minutes.value < 60) {
    return `${minutes.value}m`
  } else {
    return `${Math.floor(minutes.value / 60)}h ${minutes.value % 60}m`
  }
})

const clickIncrement = () => {
  minutes.value += 15;
};
const clickDecrement = () => {
  minutes.value -= 15;
};

</script>

<template>
  {{ displayTime }}
  <span class="input-wrapper">
    <button :disabled="(minutes - 15) < 0" id="decrement" @click.prevent="clickDecrement">
      <img alt="" class="min-icon" :src="minIcon" /> </button>
    <span class="flex white-bg">
      <input id="quantity" v-model="minutes" type="number" min="1" />
      min</span>
    <button id="increment" @click.prevent="clickIncrement">
      <img alt="" class="min-icon" :src="plusIcon" />
    </button>
  </span>
</template>

Leave a comment