Vuejs | Как реализовать v-model для компонента

Question

Убрать у кнопки disabled когда поля формы полностью заполнены (код из 6 цифр).

<InputCode v-model="value" />
<b-button @click.prevent="goToTest" variant="success" block :disabled="isInputCodeDisabled">Go</b-button>

В data:

isInputCodeDisabled: true,

Код самого компонента

<input
                :autofocus="n == 1"
                :disabled="isInputCodeDisabled"
                @keydown="inputKeydown"
                @focus="inputFocus"
                v-model="formCode[n-1]"
                @input="inputField"
                type="text"
                class="form-control"
                autocomplete="off"
                placeholder="X"
            >

Как убрать у кнопки disabled когда заполнена форма?

Answer 1

Здесь нужно задействовать вычисляемые поля (computed).

Пример реализации:

<template>
  <div id="app">
    <input id="id" ref="price" v-model="price">
    <button :disabled="isInputCodeDisabled">calculate</button>
  </div>
</template>

<script>
export default {
  name: "App",
  computed:{
    // твоя логика здесь!!!
    isInputCodeDisabled(){
      return this.price.length < 6
    }
  },
  data(){
    return {
      price: 0
    }
  }
};
</script>

БЛОГ НА HUSL

Vuejs | Как реализовать v-model для компонента

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