How to make button active based on input

Question

 .form-group
                      label(for="current-weight-input") 
                      input.form-control#current-weight-input(type="text" v-model="currentWeight" data-cy="current-weight" placeholder="Current weight (kg)")
                    .form-group
                      label(for="target-weight-input")
                      input.form-control#target-weight-input(type="text" v-model="targetWeight" data-cy="target-weight" placeholder="Goal weight (kg)")

              b-button.mt-4(@click="doSetGoal(goal.id)" :class="{active: isActiveGoal(goal.id)}") {{ goal.name }}

 computed: {
    ...mapState({
      goals: state => state.registration.goalList,
    }),
    goal: {
      get() {
        return this.$store.state.registration.goal;
      },
      set(value) {
        this.setGoal(value);
      },
    },
  },
  mounted() {
    this.fetchGoals();
  },

I got 3 buttons, gain weight, maintain weight, lose weight. I also got input fields on another page with current weight and goal weight. How can I make it be selected automatically based on current weight and goal weight I input. For example. If current weight is less than goal weight then make button Gain weight active

i got this script here, I do not know if I'm doing it correctly and do not know how to continue with it.

 setButtonGoal(goal) { 
var currentWeight = this.currentWeight;
var targetWeight = this.targetWeight;
 if (currentWeight < targetWeight) { // Gain weight } 
else if (currentWeight > targetWeight) { // Lose weight } 
else if (currentWeight == targetWeight) { // Maintain weight } },

use :active="logic or method here"

Raffobaffo
– Raffobaffo

2020-07-08 08:57:42 +00:00
Commented Jul 8, 2020 at 8:57 — Raffobaffo
– Raffobaffo, Commented Jul 8, 2020 at 8:57
The input fields are on seperate page.

Dave
– Dave

2020-07-08 10:26:43 +00:00
Commented Jul 8, 2020 at 10:26 — Dave
– Dave, Commented Jul 8, 2020 at 10:26

Neha Jain · Accepted Answer · 2020-07-08 18:00:36Z

0

You can use a computed property and put your logic inside it, send that as a prop to child component and then use it there.

answered Jul 8, 2020 at 18:00

Neha Jain

1268 bronze badges

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

Collectives™ on Stack Overflow

How to make button active based on input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related