CODEWITHSUNDEEP
vue.js
C. Yee
C. Yee

Reputation: 197

Changing background color if an input is disabled in Vue.js

Just started using Vue.js so lots to learn. I want to change the background color when an input is disabled because a computed function returns true. I can't seem to make it work.

This is in my export default 

computed: {
  disableField () {
    if (condition) return true
  }
}

This is in my template

<input
  :class="{ disableInput: disableField }"
  :disabled="disableField"
/>

This is in my CSS

.disable-input {
  background-color: gray;
}

It disables the field when the computed function returns true but it doesn't change the background color.

Upvotes: 2

Views: 10118

Answers (2)

Sphinx
Sphinx

Reputation: 10729

As @dziraf pointed out, your class name is 'disable-input', so change it to :class="{'disable-input': disabled}", then should work fine.

Or if this input only bind this class, uses :class="disabled ? 'disable-input' : ''" is another solution.

Or you may want to use css selector to implement same goal, like:

input:disabled { background-color:red; }

Below is one demo:

new Vue({
  el: '#app',
  data () {
    return {
      disabled: true
    }
  }
})
input:disabled {
  background-color:red;
}

input.disable-input {
  background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button @click="disabled=!disabled">Toggle {{disabled}}</button>
  <input :disabled="disabled" :value="'abc'">
  <input :disabled="disabled" :value="'abc'" :class="{'disable-input': disabled}">
  <input :disabled="disabled" :value="'abc'" :class="disabled ? 'disable-input' : ''">
</div>

Upvotes: 6

kots
kots

Reputation: 465

Corrected syntax below. Enclose your classname in quotes.:

<input
  :class="{ 'disableInput': disableField }"
  :disabled="disableField"
/>

Upvotes: 1

Related Questions