Vue.js+Element UI：如何转换el-switch的数值类型（0/1与布尔值互转）

嘿，这个问题我刚在项目里解决过，给你几个好用的办法，挑适合你的来：

方案1：利用Element UI Switch组件自带的属性（最简单） #

Element UI的el-switch其实支持自定义激活/非激活的值，不用自己手动转换数据。你只需要给组件绑定:active-value="1"和:inactive-value="0"（注意用v-bind绑定数字类型，不然会变成字符串），直接把v-model绑定到product.pos_hidden就行，组件会自动适配整数和布尔状态的对应关系：

<el-switch 
  inactive-color="#ff4949" 
  v-model="product.pos_hidden" 
  :active-value="1" 
  :inactive-value="0"
  @change="valuePOS"
></el-switch>

这样你的模板里的v-if判断（product.pos_hidden === 1）完全不用改，接口返回的0/1直接能用，提交的时候也不用转换，直接传product.pos_hidden就行。

方案2：Vue计算属性双向绑定（最优雅） #

如果需要在转换的时候做额外逻辑（比如实时校验、状态同步），用计算属性的get/set方法是最优解。它能帮你自动在布尔值和整数之间双向转换：

// 在组件的computed选项里添加：
computed: {
  posHiddenSwitch: {
    get() {
      // 把接口返回的0/1转成布尔值给开关用
      return this.product.pos_hidden === 1;
    },
    set(val) {
      // 把开关的布尔值转回0/1存回product对象
      this.product.pos_hidden = val ? 1 : 0;
      // 这里可以直接调用提交接口，或者触发你的change方法
      this.valuePOS(val);
    }
  }
}

然后模板里把v-model改成计算属性：

<el-switch 
  inactive-color="#ff4949" 
  v-model="posHiddenSwitch"
  @change="valuePOS"
></el-switch>

这个方案的好处是，product.pos_hidden始终保持接口需要的整数类型，开关用的是布尔值，两者互不干扰，逻辑清晰。

方案3：加载/提交时手动转换（灵活） #

如果以上两种方法都不适合你的场景，还可以手动在数据加载和提交时做转换：

加载数据时转布尔值 #

在loadData的回调里，把接口返回的整数转成布尔值存到单独的变量：

methods: {
  loadData() {
    this.loading = true;
    const headers = { Authorization: 'Bearer ' + window.accessToken };
    axios({
      method: 'GET',
      url: BASE_API + 'product/' + this.$route.params.id,
      params: this.params,
      headers: headers
    })
    .then(response => {
      this.product = response.data.data;
      // 新增变量存储开关用的布尔值
      this.posSwitch = this.product.pos_hidden === 1;
      this.loading = false;
    })
    // ... catch逻辑不变
  },
  // 提交时转回整数
  valuePOS(val) {
    // val是开关的布尔值，转成接口需要的0/1
    const posValue = val ? 1 : 0;
    // 这里调用接口提交数据，比如：
    // axios.put(BASE_API + 'product/' + this.$route.params.id, {
    //   ...this.product,
    //   pos_hidden: posValue
    // }, { headers })
    // .then(...)
  }
}

模板里绑定这个单独的变量：

<el-switch 
  inactive-color="#ff4949" 
  v-model="posSwitch"
  @change="valuePOS"
></el-switch>

补充：修正你原来的valuePOS方法 #

你原来的方法里写的fooBar |1是无效代码，应该改成实际的赋值或接口调用逻辑，比如上面方案里的转换逻辑。

内容的提问来源于stack exchange，提问作者dede.brahma