CODEWITHSUNDEEP
vue.jsvuejs2
Dave
Dave

Reputation: 2028

How to make button active based on input

 .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 } },

Upvotes: 0

Views: 86

Answers (1)

Neha Jain
Neha Jain

Reputation: 126

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.

Upvotes: 0

Related Questions