如何根据输入值动态启用或禁用按钮？

Question

背景：

我有一个设置，其中一对数字输入和按钮是使用 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: ""
    }

Answer 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=''
   }

  }
});

这里正在工作fiddle。