How can I make a default value in input using interpolation?

Question

Vue.js

I need to pass the default input value from the model that I have in data. So that when rendering there would be a value that I could then change. You need to make max_slippage the default value. How can I achieve this?

<teamplate>
 <input class="input border border-gray-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600" v-model="name" name="inputSlipage" id="slipage" type="text">
{{ max_slippage }}
</template>
<script>
 data() {
   return {
     max_slippage: null,
}
}
</script>

Answer 1

If I understood you correctly:

<template>
  <input
    class="input border border-gray-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
    :value="name === null ? max_slippage : name"
    @input="name = $event.target.value"
    name="inputSlipage"
    id="slipage"
    type="text"
  >
</template>

<script>
  export default {
    data() {
      return {
        max_slippage: null,
        name: null
      }
    }
  }
</script>

PS You obviously overdid it with universal classes. Better use sass with variables and mixins.)