NuxtJS中复选框多选时POST接口仅首次调用成功问题求助

我帮你定位到了问题的核心，主要是两处细节错误导致多选时接口无法正确接收参数，咱们一步步来修复：

1. 核心问题：POST请求参数被错误包装成二维数组 #

看你的feedsByCategories方法，你把传入的分类数组又额外套了一层数组：

axios.post(process.env.apiURL + "feeds/feedsByCategories", {
  categories: [categories] // 这里出错了！categories本身已经是数组
})

单选时，selectedCategories是[cat1]，传入后变成[[cat1]]，部分接口可能能兼容这种格式；但多选时，selectedCategories是[cat1, cat2]，传入后变成[[cat1, cat2]]，接口期望的是一维数组，自然返回空数据。

修复方法：直接传入原数组即可，不用额外嵌套：

axios.post(process.env.apiURL + "feeds/feedsByCategories", {
  categories // ES6对象属性简写，等价于categories: categories
})

2. 冗余状态+事件绑定冲突 #

你同时维护了checkedCategories（绑定复选框v-model）和selectedCategories（手动在change事件维护），完全没必要，还容易导致数据同步混乱。而且v-model已经能自动维护选中状态，再用@change手动操作数组会重复触发逻辑。

我们可以改用监听checkedCategories变化的方式自动触发接口请求，去掉冗余的状态和事件绑定。

修改后的完整代码 #

Script部分

<script>
import axios from "axios";
import uniq from "lodash/uniq";

export default {
  async asyncData({ req, params }) {
    const [storeInfo, feedsInfo] = await Promise.all([
      axios.get(
        `${process.env.apiURL}/stores/findOne?filter[where][store_name]=${params.id}`
      ),
      axios.post(`${process.env.apiURL}/feeds/feedsByStores`, {
        stores: [params.id]
      })
    ]);
    return {
      stores: storeInfo.data,
      feeds: feedsInfo.data,
      categories: uniq(feedsInfo.data.map(p => p.feed_category))
    };
  },
  data() {
    return {
      checkedCategories: [],
      display: "none" // 初始化默认隐藏
    };
  },
  watch: {
    // 监听选中分类的变化，自动触发接口请求
    checkedCategories: {
      handler(newVal) {
        if (newVal.length === 0) {
          this.display = "none";
          this.getFeeds();
          return;
        }
        this.display = "inline";
        this.feedsByCategories(newVal);
      }
    }
  },
  methods: {
    async feedsByCategories(categories) {
      try {
        const res = await axios.post(
          `${process.env.apiURL}/feeds/feedsByCategories`,
          { categories }
        );
        console.log(res);
        // 记得把返回数据赋值给feeds，页面才会更新
        this.feeds = res.data;
      } catch (err) {
        console.error("请求分类数据失败:", err);
      }
    },
    getFeeds() {
      // 重新获取初始feed数据，而不是直接返回旧值
      axios.post(`${process.env.apiURL}/feeds/feedsByStores`, {
        stores: [this.stores.store_name]
      }).then(res => {
        this.feeds = res.data;
      });
    },
    uncheckallCategories() {
      this.checkedCategories = [];
      this.display = "none";
      this.search = "";
      this.Search = "";
    }
  }
};
</script>

Template部分

<template>
  <v-layout>
    <ul class="list-unstyled scrollbar">
      <li v-for="(feedcategory, index) in categories" :key="index">
        <input
          type="checkbox"
          name="category"
          :id="`category-${index}`"
          :value="feedcategory"
          v-model="checkedCategories"
        >
        <label :for="`category-${index}`">{{ feedcategory }}</label>
      </li>
    </ul>
  </v-layout>
</template>

额外优化建议（可选） #

在Nuxt项目中，推荐使用官方的@nuxtjs/axios模块，而非直接import axios。它会自动处理SSR环境下的请求、环境变量配置，还能设置全局baseURL，让代码更简洁。只需要在nuxt.config.js中配置后，直接使用this.$axios即可。

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