Toggle input element's disabled attribute depending on a checkbox value using VueJS

Question

I'm trying to create a form in which one text input field will have disabled attribute if a checkbox is checked. I tried:

 new Vue({ el: "#app", data: { isChecked: false, name: null } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <input type="text" v-model="name" :class="{disabled: isChecked}" placeholder="disabled if box checked"> <input type="checkbox" v-model="isChecked"> </div> 

Answer 1

Instead if using a conditional class, you can just use the property disabled and make it dynamic by adding a : in front of it and binding it to the isChecked variable. Your code will then look like this :

<div id="app">
  <input type="text" v-model="name" :disabled="isChecked" placeholder="disabled if box checked">
  <input type="checkbox" v-model="isChecked">
</div>