Vue页面中将多个选择框所选的数据通过查询按钮发送给后端

在Vue.js中，如果你有多个选择框(`select`元素)，并且想要在用户点击查询按钮时将所有选择框的选择数据发送到后端服务器，可以按照以下步骤操作：

1. **绑定数据**: 首先，你需要将每个选择框绑定到组件的一个数组，这样每次选择发生变化，数组会自动更新。

<template>
  <div>
    <select v-model="options1" @change="updateData">...</select>
    <!-- 添加其他选择框 -->
    <button @click="sendData">查询</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [],
      // 添加其他选项列表
    };
  },
  methods: {
    updateData(e) {
      // 更新对应的数据数组，比如这里是options1
      this.options1.push(e.target.value);
    },
    sendData() {
      const formData = { // 创建包含所有选项数据的对象
        option1: this.options1,
        // 添加其他字段，如option2、option3等
      };

      // 使用axios、fetch或其他HTTP库向后端发送POST请求
      axios.post('/api/query', formData).then(response => {
        console.log('响应:', response.data);
      });
    }
  }
};
</script>

**注意事项**:

- `v-model`用于双向数据绑定，当用户从下拉菜单选择值时，`options1`数组会被更新。
- `@change`事件监听器触发`updateData`函数，收集并存储每个选择框的选择值。
- `sendData`方法创建一个包含所有选项数据的对象，然后发送到指定的后端URL。