Updating an initial value in a component in vue

Question

I have a component like this:

<script>
export default {
  name: "Thing",
  props: {
    min: Number,
    value: Number
  } ...

-

<template>
...
<input type="number" v-bind:min=min/10  step="0.1" v-model = value aria-hidden="true" />
...
</template>

I generally use millimeters, while I want to display things in centimeter. So for example this component will be initialized with value = 50 (50mm), but I want the input to display 5 (5cm).

How can I change "value" in the component to be value/10 upon initialization? Also I need to pass some tests , so something like "Just do value/10 in the parent before initializing the component" wont work Im afraid.

Answer 1

You can add a computed to the component as follows:

computed: {
    minimum() {
      return this.min / 10;
    }
}

And use it as follows:

<h1>{{ minimum }}</h1>

This way, you pass the prop like this:

:min="min"

Answer 2

Found the answer myself:

<script>
export default {
  name: "Thing",
  props: {
    min: Number,
    value: Number
  }, 
   created: function() {
        this.value = this.value/10;
  },...