Как в Vue кнопкой отключать input?

В Vue.js можно легко отключить input с помощью директивы v-bind в сочетании с атрибутом disabled. Для этого необходимо создать переменную в компоненте, которая будет отслеживать состояние кнопки, и затем привязать эту переменную к атрибуту disabled в элементе input. Вот подробный пример, демонстрирующий это:

<template>
  <div>
    <input type="text" v-bind:disabled="isDisabled" />
    <button v-on:click="toggleInput">Toggle Input</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false // начальное значение кнопки
    };
  },
  methods: {
    toggleInput() {
      this.isDisabled = !this.isDisabled; // изменение значения переменной
    }
  }
};
</script>

Здесь мы создаем переменную isDisabled со значением false внутри объекта data, которая будет отвечать за состояние кнопки. Затем, используя директиву v-bind, мы привязываем значение этой переменной к атрибуту disabled в элементе input. Устанавливая значение true или false для переменной isDisabled с помощью метода toggleInput, мы можем включать или отключать input по клику на кнопку.

При такой реализации кнопка "Toggle Input" будет изменять состояние переменной isDisabled между true и false, что в свою очередь будет менять состояние disabled для элемента input.