How do I use an if statement in a Vue.js function?

Question

What I am trying to do is have the result function offer two different equations:

return this.number1*(this.number2/100) if the {{ basketballbet.odds }} value is positive

return this.number1*(100/this.number2) if the {{ basketballbet.odds }} value is negative.

Does anyone know if this is possible?

code:

<div id="odds_calculator">
<p>Placing <input type="number" name="number1" v-on:input= "update_number1"> on this bet would win you $XXXX if you were to win the bet.</p>

  <p>Bet Amount: [[ number1  ]] </p>
  <p>Odds: {{ basketballbet.odds }}</p>

  <hr>
  <p>Result: [[ result() ]]</p>
</div>
<script>
new Vue({
  delimiters: ['[[',']]'],
  el: '#odds_calculator',
  data: {
    number1: 0,
    number2: {{ basketballbet.odds }},
  },
  methods: {
    update_number1: function (event) {
      this.number1 = event.target.value;
    },
    result: function () {

      return this.number1*(this.number2/100);
    },

  },
});
</script>

Jakub A Suplicki · Accepted Answer · 2020-06-02 23:23:20Z

3

Yes, it is. If it is simply about a positive or negative value then you can use Math.sign(). Check here for more info.

For example:

if (Math.sign(this.number2) == 1) {
  //positive
}else if (Math.sign(this.number2) == -1) {
  //negative
}else {
  //zero
}

Good luck!

answered Jun 2, 2020 at 23:23

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rgoodwin Over a year ago

Thanks Jakub, appreciated! Just getting started with Javascript in general it's a lot to take in but your answer works great.

Jakub A Suplicki Over a year ago

No worries, keep on practicing. Eventually, it will become clearer. Vue is a great JS framework, to begin with. Remember to come back to developer.mozilla.org/en-US/docs/Web/JavaScript to look for native JS functions and all.

Jon P · Accepted Answer · 2020-06-02 23:54:20Z

2

Yes you can but this is also the perfect opportunity to introduce yourself to the ternary operator

new Vue({
  delimiters: ['[[',']]'],
  el: '#odds_calculator',
  data: {
    number1: 0,
    number2: {{ basketballbet.odds }},
  },
  methods: {
    update_number1: function (event) {
      this.number1 = event.target.value;
    },
    result: function () {
      //here is the aforementioned ternary operator
      return this.number2 < 0 ? this.number1*(100/this.number2) : this.number1*(this.number2/100);
    },

  },
});

answered Jun 2, 2020 at 23:54

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Comments

diegooblue · Accepted Answer · 2020-06-02 23:21:53Z

0

result: function() {
  if (this.number1 > 0) {
    return this.number1 * (this.number2 / 100);
  } else if (this.number1 < 0) {
    return this.number1 * (100 / this.number2);
  }
},

answered Jun 2, 2020 at 23:21

diegooblue

1

Collectives™ on Stack Overflow

How do I use an if statement in a Vue.js function?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related