``` <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value" @change="change"></form-create>```如何使多选框互斥

在这个Vue.js模板片段中，`<form-create>` 是一个自定义组件，它接受几个属性：`v-model`、`:rule`、`:option` 和 `@change`。`v-model` 是双向数据绑定，`:rule` 可能用于设置验证规则，`:option` 可能是多选框选项的对象数组，`:value.sync` 用于同步数据，而 `@change` 事件监听值的变化。

如果想要实现多选框互斥，即只能选择其中一个选项，通常你需要在组件内部处理这个逻辑。你可以这样做：

1. 当用户选择新的选项时，先清空已选的所有其他选项。
2. 在`change`事件处理器中，检查当前选中的值是否已经存在于已选的值列表中，如果是，则取消选中，如果不是则添加到已选值列表。

例如，假设你有一个名为`options`的数组存储所有的多选项，可以这样操作：

data() {
  return {
    selectedOptions: [], // 存储已选择的选项
    fApi: '', // 表单API字段
    rule: {}, // 验证规则
    option: [], // 多选框选项
    value: '', // 当前选中的值（绑定到v-model）
  }
}

methods: {
  change(newValue) {
    if (this.selectedOptions.includes(newValue)) { // 如果新值已在选择中
      this.selectedOptions = this.selectedOptions.filter(option => option !== newValue); // 移除该选项
    } else {
      this.selectedOptions.push(newValue); // 否则，添加新值
    }
    this.value = this.selectedOptions[0]; // 更新显示的值（这里假设只有一个选项可以同时选中）
  },
}

当用户改变选项时，会触发`change`方法，从而保证多选框之间的互斥。