Как отключить кнопку в vuejs

Просто привяжите атрибут disabled к логическому значению, например

<button :disabled='isDisabled'>Send Form</button>

как в этот пример

https://vuejs.org/v2/guide/syntax.html#Атрибуты

<button type = "submit" class = "btn btn-info" :disabled = "validated">Next</button>

Привяжите атрибут disabled к логическому значению после проверки или, в вашем случае, все входные данные будут заполнены, верните true

Вы можете использовать вычисляемое свойство, чтобы включить/отключить кнопку. Каждый раз, когда условие изменяется внутри вычисляемого свойства, кнопка отключения или включения будет отображаться. Условие должно быть логическим.

<template>
  ...
  <button type = "submit" class = "btn btn-info" :disabled = "isDisabled">Next</button>
  ...
</template>

<script>
  export default {
    computed: {
      isDisabled() {
        // you can  check your form is filled or not here.
        return yourCondition == true
      },
    },
  }
</script>

Этот код работает для меня.

Кнопка:-

  <button
                id = "myBtn"
                @click = "pay()"
                class = "btn btn-primary"
                :disabled = "!isComplete"
              >
                Pay ${{ this.amount }}
              </button>

В вычислении (я проверяю, пусты ли мои свойства или нет, если все они заполнены, я вернул ИСТИННЫЙ, что приводит к кнопке ВКЛЮЧИТЬ)

  isComplete () {
      return (
        this.user_name != '' &&
        this.email != '' &&
        this.phone != '' &&
        this.address != ''
      )
    }

И, наконец, используйте следующий CSS

#myBtn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}