Как я могу сделать дефолтное значение в input использую интерполяцию?

Question

[ceeed]

Мне нужно передать дефолтное значение input из той модели, которая у меня находится в data. Чтобы при рендере там стояло бы значение, которое я бы потом мог поменять. Нужно max_slippage сделать дефолтным значением. Как мне этого добиться?

<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

[Aetae]

Если я правильно тя понял:

<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>

P.S. Ты явно переборщил с универсальными классами. Используй лучше sass с переменными и миксинами.)

Comments

[ceeed]

У меня теперь в input null, а должно быть число которое приходит в модель max_slippage. Обычно там просто числовое значение которое прилетает с бэка. Не подскажешь в чем ошибка?

[Aetae]

ceeed, не вижу где что-либо прилетает с бэка. max_slippage равно null потому что оно равно null и нигде не меняется. ¯\_(ツ)_/¯

Если там за кадром какой-то магический код который пишет как-то в input, то слишком много что может пойти не так. Нужен код. Но лучше обращайтесь на сервер из vue, по возможности.

[ceeed]

Aetae,
После того как рендерется страница мы получаем в max_slippage не null, вот это значение мне и нужно поставить в input. Извините, что может очень плохо объяснил.

[Aetae]

ceeed, понятия не имею откуда у вас строковой null берётся, всё прекрасно работает: