CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5107

Using conditional for computed Vue properties

I'm using Vue in a site and I have a working button which changes state (If button says pause and is clicked it changes to say resume, as well as changing the colors)

The button functionality here works perfectly on the page but I'm having an issue making it line up with a value on the same page. I have another function that has an object called details and that has a value called status which can be "H" or "P"

All I need to do now is resolve this so that on page load, if the status is "H" the button says 'Resume' and if it's "P" the button says Pause (essentially, if "H" then !this.isOpen, and if "P" then this.isOpen)

How can I change this for page load so that if status is H this.isOpen is false, and if it's P this.isOpen is true? I can't do an if/conditional in the data return but maybe I could use computed properties somehow?

<button class="btn btn-block" :style ="{ color: pauseButton.textColor, backgroundColor:pauseButton.background, border:none, borderRadius: .15 }" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false">
  {{ pauseButton.text }}
</button>

data() {
    return {
        details: [],
        pauseButton: {
            text:'Pause',
            textColor: '#6c757d',
            background: '#BDE5F8'
        },
        isOpen: true,
    }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

      //this is the new line that doesn't work the way I need
      if(this.details[0].status === 'H'){
        !this.isOpen;
      }

      this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
      this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
      this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
    },

Upvotes: 1

Views: 1048

Answers (2)

Ja9ad335h
Ja9ad335h

Reputation: 5075

If your details is an Array and you are looping it to create multiple elements, you should follow a method like below to simplify it.

new Vue({
  el: '#app',
  data() {
    return {
      details: [{
        status: 'H'
      }, {
        status: 'H'
      }, {
        status: 'P'
      }]
    }
  },
  methods: {
    toggleTask(d) {
      d.status = (d.status == 'H' ? 'P' : 'H')
    }
  }
});
.btn {
  border: none;
  border-radius: .15;
  margin: 4px 0;
  padding: 4px 10px;
}

.btn.resume {
  color: #ff6e6e;
  background-color: #FEEFB3;
}

.btn.pause {
  color: #6c757d;
  background-color: #BDE5F8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="(d, i) in details" :key="i">
    Status: {{ d.status}}
    <button 
      :class="['btn', 'btn-block', d.status == 'H' ? 'resume' : 'pause']" 
      @click="toggleTask(d)" 
      role="button" 
      aria-expanded="false">
      {{ d.status == 'H' ? 'Resume' : 'Pause' }}
    </button>
  </div>
</div>

Upvotes: 1

Imran
Imran

Reputation: 530

Just assign the isOpen value to !isOpen only when it's 'H' in the mounted or created lifecycle method. 

mounted(){
  if(this.details[0].status === 'H'){
    this.isOpen = !this.isOpen;
  }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

      this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
      this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
      this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
    },

Upvotes: 1

Related Questions