Vue.js中实现复选框选中数量限制及跳转功能求助

假设你用的是Vue 2或Vue 3，下面是具体的实现代码：

模板部分 #

首先确保你的复选框v-model绑定的是数组类型的变量（这样才能收集多个选中的选项），多个复选框的示例如下：

<input v-model="compared" type="checkbox" name="compare" value="item1">选项1
<input v-model="compared" type="checkbox" name="compare" value="item2">选项2
<input v-model="compared" type="checkbox" name="compare" value="item3">选项3
<input v-model="compared" type="checkbox" name="compare" value="item4">选项4

脚本部分 #

方式1：使用watch监听选中数组变化（推荐） #

通过监听compared数组的长度，自动处理数量限制和页面跳转逻辑：

// Vue 2 写法
export default {
  data() {
    return {
      compared: [] // 初始化为空数组
    }
  },
  watch: {
    compared(newVal) {
      // 限制最多选中3个，超过则截断数组保留前3个
      if (newVal.length > 3) {
        this.compared = newVal.slice(0, 3);
      }
      // 选中数量达到3个时跳转页面
      if (newVal.length === 3) {
        // 替换成你的目标页面地址
        window.location.href = '/compare-page';
        // 如果用Vue Router，改成：this.$router.push('/compare-page');
      }
    }
  }
}

// Vue 3 组合式API写法
import { ref, watch } from 'vue';
export default {
  setup() {
    const compared = ref([]);
    
    watch(compared, (newVal) => {
      if (newVal.length > 3) {
        compared.value = newVal.slice(0, 3);
      }
      if (newVal.length === 3) {
        window.location.href = '/compare-page';
        // Vue Router 写法：router.push('/compare-page');（需先导入router）
      }
    });
    
    return { compared };
  }
}

方式2：通过复选框的change事件处理 #

给每个复选框绑定change事件，在事件函数里处理逻辑：

<input v-model="compared" type="checkbox" name="compare" value="item1" @change="handleCompare">选项1
<!-- 其他复选框同样绑定@change="handleCompare" -->

// Vue 2 写法
export default {
  data() {
    return {
      compared: []
    }
  },
  methods: {
    handleCompare() {
      // 超过3个则移除最后选中的选项
      if (this.compared.length > 3) {
        this.compared.pop();
      }
      // 达到3个时跳转
      if (this.compared.length === 3) {
        window.location.href = '/compare-page';
      }
    }
  }
}

注意事项 #

• 每个复选框的value要设置为唯一值，避免选中多个相同value的选项导致数组异常。
• 跳转页面的方式根据项目技术栈选择：原生的window.location.href适用于普通场景，Vue项目推荐用Vue Router的push方法。
• 如果是Vue 3的选项式API，写法和Vue 2基本一致，只需调整导出方式。

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