Issue:
In my setup, number inputs and buttons are dynamically created using a v-for loop. The value of the number input, named subExpense, is added to an array called expenseButton[].
Solution Attempt:
I am attempting to disable the dynamically created buttons when the corresponding input field is empty. Specifically, each button should be disabled until its respective number input is filled in.
Implementation:
<div class="buttonFor" v-for="(expense,index) in expenseButton" :key="index">
<button class="btn btn-primary mx-3" @click="toggle(expense)" :disabled="isDisabled(expense.subExpense)">{{expense.expensesKey}}</button>
<input v-model="expense.subExpense" type="number" />
</div>
Script Section:
data() {
return {
budgetOwner: "",
myExpense: [],
expenseButton: [],
component: "",
errored: false,
subExpense: ""
};
},
methods: {
toggle(expense) {
console.log(expense.subExpense);
},
computed: {
isDisabled(subExpense) {
return 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;
});
});
}
};