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

Question

Мне нужно передать дефолтное значение 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

Начальные значения задаются как обычно в объектном литерале:

{
  data() { return {
    name: 'укажи здесь любое начальное значение - оно и окажется в инпуте', 
    max_slippage: 'так же и этому свойству можно указать значение, и любому другому', 
    // .... 
  }}, 
  // .... 
}

И никакая интерполяция для этого не нужна.

И сразу поясню, что в функции data обратиться к свойствам компонента через this нельзя (попытка такого обращения является частой ошибкой новичков) - т.к. эта функция вызывается не в контексте компонента... потому что в момент ее вызова, экземпляр компонента (на который указывал бы this) еще не создан.
Обращаться к свойствам компонента можно начиная с created/(onCreated в Composition API), и в последующих хуках жизненного цикла - подробнее об этом можно прочесть в справке Vue, на ее официальном сайте.

БЛОГ НА HUSL

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

Ответы (1 шт):