CODEWITHSUNDEEP
vue.js
supernova
supernova

Reputation: 127

Vue toggle class based on props

I am trying to toggle a class based on isNight's truth value:

<div :class="['app-bg', { nightBg: isNight }]"></div>

I have the isNight prop set to false as shown:

export default {
  name: 'Result',
  data(){
    return {
      error: null,
      weather: null,
      weatherIcon: null,
      isNight: false
    }
  },
  . . .

I have a function in computed that returns a true or false based on some data:

  computed: {
    nightChecker() {
      return this.weatherIcon.slice(2) == 'n' ? true : false
    }
  },

How do I update the isNight prop to reflect the return value of nightChecker()? I tried isNight: nightChecker, but that throws an error.

EDIT: Thank you to everyone who helped me understand this more. As you may can tell, I am new to Vue and am still wrapping my head around it.

Upvotes: 0

Views: 713

Answers (2)

Dan
Dan

Reputation: 63149

Assuming the error is from weatherIcon starting null, it's because null doesn't have a slice method. You don't need slice anyway.

  • slice returns a range, but since you're only testing against 1 character, it makes more sense to evaluate the index
  • By not using slice, there is no error even when weatherIcon is null
  • As mentioned in comments, the ternary is unnecessary, you can return the value of the equality check
computed: {
  nightChecker() {
    return !!this.weatherIcon && this.weatherIcon[2] === 'n';
  }
}

The double not is necessary because null && false is null, not false

Here's a demo if this is still unclear:

new Vue({
  el: "#app",
  data() {
    return {
      weatherIcon: null
    }
  },
  computed: {
    nightChecker() {
      return !!this.weatherIcon && this.weatherIcon[2] === 'n';
    }
  },
  methods: {
    toggle() {
      this.weatherIcon = this.weatherIcon === 'tonight' ? 'today' : 'tonight'
    }
  },
});
<div id="app">
  Is it night? {{ nightChecker }} <br>
  <button @click="toggle">Toggle day/night</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Upvotes: 2

Maxi
Maxi

Reputation: 31

idk if i got the question right, but

data(){
  return {
    error: null,
    weather: null,
    weatherIcon: null,
    isNight: this.nightChecker()
  }
},

computed(){
  nightChecker(){
    return this.weatherIcon && this.weatherIcon.slice(2) === 'n';
  }
}

Upvotes: 0

Related Questions