背景:
我有一个设置,其中使用v-for循环动态创建一对数字输入和按钮。数字输入的值,称为subExpense,将添加到保存的数组中,称为expenseButton []。
问题:
我尝试在相应的输入为空时禁用动态创建的按钮。例如,如果我有4对按钮和数字输入,则 second 按钮将被禁用,直到用户键入 second 数字输入。
尝试
我尝试将禁用的属性绑定到计算函数。计算的函数具有一个方程,该方程应该跟踪选定的输入是否为空。
V-for循环
<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>
脚本
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>
更新:
<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: ""
}
答案 0 :(得分:1)
根据我的理解,您希望禁用相应的按钮,直到用户在文本框中输入内容为止。
您可以做这样的事情
<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=''
}
}
});
这里{@ 3}正在工作。