vue监听多个输入框离焦后请求接口

在Vue.js中，你可以使用事件监听机制来实现当多个输入框失去焦点（即用户离开输入框）后触发某个请求接口的操作。首先，你需要在Vue组件模板中为每个输入框绑定`@blur`事件，并在事件处理器中发送请求。下面是一个简单的示例：

<template>
  <div>
    <input type="text" v-for="(input, index) in inputs" :key="index" @blur="handleBlur(input, $event)">
    <!-- ...更多输入框... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        // 定义你想要监听的所有输入框
        { name: 'Input1' },
        { name: 'Input2' },
        { name: 'Input3' }
      ]
    };
  },
  methods: {
    handleBlur(input, event) {
      if (event.target.value.trim()) { // 只有非空值才会触发请求
        this.fetchData(input.name);
      }
    },
    fetchData(name) {
      // 这里是你实际的网络请求，例如axios、fetch等
      fetch(`your-api-url/${name}`)
        .then(response => response.json())
        .then(data => console.log(`处理 ${name} 的数据`, data));
    }
  }
};
</script>

在这个例子中，每当有一个输入框失去焦点并且输入内容不为空时，`handleBlur`方法会被调用，然后会调用`fetchData`方法并将输入框的名字作为参数传递给API。