Vue.js中如何筛选Amount>0的数据并发送Post请求至后端

很简单，你只需要给提交按钮绑定点击事件，然后在对应的方法里用数组的filter方法来筛选符合条件的数据就行。下面是具体的修改步骤和完整代码：

步骤说明 #

• 给Submit按钮添加点击事件绑定：@click="handleSubmit"
• 在Vue实例的methods选项中定义handleSubmit方法，完成数据筛选和控制台打印
• 筛选时注意把Amount转为数字（因为输入框绑定的是字符串类型），避免出现字符串比较的异常情况

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <label>Total Amt</label>
    <input type="text" v-model="totalAmt">
  </div>
  <div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
    <label>{{mode.PAYMENTNAME}}</label>
    <input type="text" v-model="mode.Amount">
  </div>
  <div>
    <label>Bal Amt</label>
    <input type="text" :value="balAmt">
  </div>
  <!-- 添加点击事件绑定 -->
  <button @click="handleSubmit">Submit</button>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      totalAmt: 500,
      paymentMode: [
        { "PAYMENTCODE": "SW", "PAYMENTNAME": "Swiggy" },
        { "PAYMENTCODE": "BB", "PAYMENTNAME": "uber Eats" },
        { "PAYMENTCODE": "WE", "PAYMENTNAME": "Zomato" }
      ]
    }
  },
  computed: {
    balAmt() {
      // sum of inputs of paymentMode
      const sum = this.paymentMode.reduce((a, b) => a + (+b.Amount || 0), 0);
      return sum - this.totalAmt;
    }
  },
  // 添加methods选项处理提交逻辑
  methods: {
    handleSubmit() {
      // 筛选Amount大于0的有效项
      const filteredData = this.paymentMode.filter(item => {
        const amount = Number(item.Amount);
        // 排除非数字输入，只保留数值大于0的项
        return !isNaN(amount) && amount > 0;
      });
      
      // 打印筛选后的数据，之后直接用这个结果发axios请求即可
      console.log('待提交的有效数据:', filteredData);
      
      // 这里可以直接插入你的axios请求代码
      // axios.post('/your-backend-api', filteredData)
      //   .then(res => console.log('提交成功:', res))
      //   .catch(err => console.error('提交失败:', err));
    }
  }
})
</script>

关键代码解释 #

• filter方法会遍历paymentMode数组，只保留满足条件的元素
• Number(item.Amount)把输入框的字符串值转为数字，避免字符串比较的逻辑错误（比如"05" > "10"这种不符合预期的情况）
• !isNaN(amount)用来过滤用户输入的非数字内容，确保提交的都是有效数值

这样点击提交按钮后，控制台就会输出只有Amount大于0的键值对数据，直接用这个结果发送axios请求就可以啦！

内容的提问来源于stack exchange，提问作者manish thakur