В этом руководстве вы узнаете, как условно включить / отключить атрибуты HTML в компонентах Vue.js.

В Vue.js вы можете включить или отключить кнопку HTML или поле формы, сделать их обязательными или необязательными, используя несколько способов.

Использование вычисляемого свойства

Я описал как условно отключить поле ввода с помощью вычисляемого свойства. Вот пример.

<div id="app">
  <h2>Please, verify your email address:</h2>
  <input type="text" id="email" name="name" v-model="email" :disabled="validated ? '' : disabled" /><br><br>
  <h4 v-if="validated">
    Thank you for verifying your email address
  </h4>
</div>

Мы проверяем HTML-атрибут disabled на вычисленное свойство validated().

Если validated равно true, поле ввода станет disabled.

Использование объекта данных

Мы можем сравнивать атрибуты HTML со значениями объекта data ().

<div id="app">
  <h2>Please, verify your email address:</h2>
  <input type="text" id="email" name="name" v-model="email" :disabled="!emailEnabled" /><br><br>
  <h4 v-if="validated">
    Thank you for verifying your email address
  </h4>
</div>

emailEnabled установлен в false, следовательно, поле электронной почты disabled.

new Vue({
  el: "#app",
  data: {
    email: null,
    correctEmail: '[email protected]',
    emailEnabled: false
  },
  methods: {
  },
  computed: {
    validated() {
      if (this.email === this.correctEmail) {
      	return true
      }
    },
  }
})

Таким же образом мы можем включить / отключить другие атрибуты HTML, например required.

<input type="text" id="email" name="name" v-model="email" :required="emailRequired" />

Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов

Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-html-attributes

PS: Обязательно ознакомьтесь с другими руководствами по Vue.js, например 5 лучших CSS-фреймворков для вашего проекта Vue.js (2019), Как программно перемещаться по маршрутизатору в Vue.js.

Первоначально опубликовано на https://renatello.com ( Условное включение / отключение атрибутов HTML в Vue.js ) 22 июля 2019 г.