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

Question

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.

Sphinx · Accepted Answer · 2018-09-26 22:32:31Z

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>

tony19 · Accepted Answer · 2018-09-26 22:19:17Z

1

Corrected syntax below. Enclose your classname in quotes.:

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

edited Sep 26, 2018 at 22:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 26, 2018 at 21:53

kots

4652 silver badges7 bronze badges

3 Comments

dziraf Over a year ago

It should be 'disable-input'.

C. Yee Over a year ago

@dziraf You're right. disable-input works. Thank you! This blog that I was reading about Vue.js said to use camel case :(

dziraf Over a year ago

Just read official documentation, it's very good and this topic is covered there too.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related