CODEWITHSUNDEEP
javascriptvue.jsfor-loopaxios
Eddie Weldon
Eddie Weldon

Reputation: 133

How to dynamically enable or disable button dependent on if input value?

Background:

I have a set up where a pair of number inputs and buttons are created dynamically using a v-for loop. The number input's value, which is called subExpense, will be added to an array saved called expenseButton[].

Problem:

I am trying to disable the dynamically created buttons when the corresponding input is empty. For example, if I have 4 pairs of button and number inputs, the second button is disabled until the user type in the second number input.

Attempt

I tried binding a disabled attribute to a computed function. The computed function has an equation that is supposed to keep track if the selected input is empty or not.

V-for loop

 <div class="buttonFor" v-for="(expense,index) in expenseButton" :key="index">
            <button class="btn btn-primary mx-3" @click="toggle(expense)">{{expense.expensesKey}}</button>
            <input v-model="expense.subExpense" type="number" />
 </div>

Script

 data() {
    return {
      budgetOwner: "",
      myExpense: [],
      expenseButton: [],
      component: "",
      errored: false,
      subExpense: ""
    };
  },
  methods: {
    toggle(expense) {
      console.log(expense.subExpense);
    },
  computed: {
      isDisabled() {
        return this.subExpense.length < 1;
      }
  },
  beforeRouteEnter(to, from, next) {
    axios
      .get("/api/budget", {
        headers: { "Content-Type": "application/json" },
        withCredentials: true
      })
      .then(res => {
        next(vm => {
          if (res.data.budget.length > 0) {
            vm.myExpense = res.data.budget;
            vm.budgetOwner = res.data.name;
            vm.expenseButton = res.data.budget[0].expenses;
            vm.component = "navbar-check";
          } else {
            vm.component = "navbar";
          }
        });
      })
      .catch(err => {
        next(vm => {
          console.log(err.response);
          vm.errored = true;
        });
      });
  }
};
</script>

UPDATE:

  <div class="buttonFor my-3" v-for="(expense,index) in expenseButton" :key="index">
            <button
              class="btn btn-primary mx-3"
              @click="toggle(expense)"
              :disabled="expense.subExpense==''"
            >{{expense.expensesKey}}</button>
            <input v-model="expense.subExpense" type="number" />
          </div>

data() {
    return {
      budgetOwner: "",
      myExpense: [],
      expenseButton: [],
      component: "",
      errored: false,
      subExpense: ""
    }

Upvotes: 0

Views: 1815

Answers (1)

Negi Rox
Negi Rox

Reputation: 3932

As per my understanding, you want the corresponding button disabled until user will input something in a text box.

you can do something like this

 <div id="app">
  <ul class="list">
  <li v-for="item in items">
     <input type="text" v-model="item.text" v-on:keyup="SetAttribute(item)">
      <input type="button" :disabled="item.text==item.blankCheck" :value="item.value" v-on:click="CheckThis"/>
      </li>
  </ul>
</div>

var vm = new Vue({
  el:"#app",
  data:{
    items: [{ text:"",value:"Click",blankCheck:"_blank"},{ text:"Sometext",value:"Click",blankCheck:"_blank"},{ text:"",value:"Click",blankCheck:"_blank"}   ]
  },
  methods:{
  CheckThis:function(){
     alert('run')
   },
   SetAttribute:function(item){
       item.blankCheck=''
   }

  }
});

here is working fiddle.

Upvotes: 1

Related Questions