[Vuejs]-Issue with Changing button color after all fields are filled in vuejs?

by

0👍

✅

I think you can do something like this:

new Vue({
  el: '#app',
  data: {
    data1: '',
    data2: ''
  },
  methods: {
    click() {
      alert(this.data1 +' '+this.data2)
    }
  },
  computed: {
    empty() {
      return this.data1 === '' || this.data2 === '';
    },
    equal() {
      return this.data1 === this.data2;
    }
  }
});
.equal {
  color: #ffffff;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: blue;
  margin: 2rem;
  border-radius: 5px;
  font-weight: 700;
}

.no-equal {
  color: #ffffff;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: red;
  margin: 2rem;
  border-radius: 5px;
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="data1" type="text">
  <input v-model="data2" type="text">
  <button @click="click" :class="[equal ? 'equal' : 'no-equal']" :disabled="empty">Send</button>
</div>

You only need to evaluate one computed property and biding class in your elements and vuejs will automatically render it.

Leave a comment