详解mpvue中使用vant时需要注意的onChange事件的坑

如何在mpvue中使用vant组件并正确处理onChange事件，是一个容易被忽略但又十分重要的问题。以下是需要注意的要点：

问题背景

在mpvue中使用vant组件时，如v-radio-group，我们可以通过onChange事件知道用户选中了哪一个选项，组件会返回选项对应的value值。但是，在某些场景下我们需要手动清空这些选项，比如用户点击某个按钮时，我们需要将这个选项组件清空并重新渲染下一页。但是，这时候你会发现清空选项后，再次点击选项时，并没有触发onChange事件，这是什么原因呢？本文就带你解决这个问题。

解决方案

为了解决这个问题，我们需要用到一些技巧，如： 绑定触发onChange事件的input元素是否“选中”

绑定不同的v-model变量（或者通过@input事件）

绑定触发onChange事件的input元素是否“选中”

在mpvue中，触发onChange事件的组件始终是原生的input元素。我们可以使用原生checkbox或radio按钮代替vant对应的组件，当选中/取消选中这些原生按钮时，连带的input元素状态也会随之变化，从而触发onChange事件。

如果我们仍然希望使用vant组件，那么我们可以手动绑定vant组件内部的input元素来更新onChange事件。这样，在我们需要手动清空选项时，也可以手动操作input元素，从而触发onChange事件。

具体做法是：监听vant组件的change事件，在事件响应函数中手动修改组件绑定的变量值，通过v-if/v-show切换vant组件和对应的原生input元素，从而达到手动修改input元素的目的，最终触发onChange事件。

举个例子：

<template>
  <van-radio-group v-model="radioGroupSelected" :value="radioGroupSelected" @change="handleChange">
    <van-radio :name="item.value" :label="item.label" v-for="(item, index) in radioGroupItems" :key="index" />
  </van-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioGroupItems: [
        {
          label: '',
          value: ''
        }
      ],
      radioGroupSelected: ''
    }
  },
  methods: {
    handleChange() {
      // do something
    },
    clearRadioGroup() {
      // 清空选项
      this.radioGroupItems = [
        {
          label: '',
          value: ''
        }
      ];
      this.radioGroupSelected = ''; // 这里清空绑定变量的值
      this.$nextTick(() => {
        // 切换vant组件和对应的原生input元素来触发onChange事件
        // 由于小程序渲染机制的问题，更新组件状态需要$user，因此需要加一个nextTick
        this.showRadio = false;
        this.$nextTick(() => {
          this.showRadio = true;
        });
      });
    }
  }
}
</script>

绑定不同的v-model变量

还可以通过绑定不同的v-model变量，来避免onChange事件失效的问题。做法是：通过@click事件进行数据更新，从而更新组件状态，与此同时，通过计算属性计算出组件的选中状态，而不是直接暴力修改组件状态。

举个例子：

<template>
  <van-radio-group :value="radioGroupSelected">
    <van-radio v-model="radio" :name="item.value" :label="item.label" @click="radioClicked(index)" v-for="(item, index) in radioGroupItems" :key="index" />
  </van-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioGroupItems: [
        {
          label: '',
          value: ''
        }
      ],
      radioGroupSelected: '', // 绑定vant组件的选中值
      radio: '', // 单独绑定radio状态
    }
  },
  computed: {
    radioSelected: {
      get() {
        // 计算属性计算radio的选中状态
        return this.radio;
      },
      set(value) {
        // 通过点击Van-Radio修改数据并更新状态
        this.radio = value;
        this.radioGroupSelected = value;
        // do something
      }
    }
  },
  methods: {
    radioClicked(index) {
      this.radioSelected = this.radioGroupItems[index].value;
    },
    clearRadioGroup() {
      // 清空状态
      this.radioGroupItems = [
        {
          label: '',
          value: ''
        }
      ];
      this.radioGroupSelected = '';
      this.radio = '';
    }
  }
}
</script>

总结

本文提供了两种解决onChange事件失效问题的方法，并提供了两个示例供参考。当在mpvue中遇到使用vant组件时，触发onChange事件又需要做相关操作时，可以尝试以上方法，来解决问题。