[Vuejs]-Vue.js 2.x Change the value of the disabled attribute in the input element using the button

by

0👍

✅

Since disabled state and it’s toggle handler are both inside <task> component, you can keep the logic inside that component. There is no need to $emit an event to a parent component, unless you want to manage state from parent.

Inside <task> component it can be achieved by using a boolean variable and changing it value on button click, via disableItem handler.

Input element should be changed to:

<input type="text" v-model="item.description" :disabled="isDisabled">

Add we should create a variable in component’s data and update disableItem method as follows:

data () {
  return {
    isDisabled: false
  }
},
disableItem () {
  this.isDisabled = true
}

Also, it is not necessary to execute disableItem method in click handler, it can be just passed as a reference v-on:click="disableItem"

👤aBiscuit

Leave a comment