ant design vue的表单选择框等数据选择了不显示但是查看数据确实是选择成功的

今天遇到一个bug

场景是这样的:表单的一个性别选择框选择时怎么也赋值不了,然后使用@change打印了选择的值,发现其实是能拿到值的但是页面不显示,就很奇怪。按理说双向绑定,以前没有碰到过这个bug今天突然就不行了,不管怎么说页面赋值不了还是得解决的

监听选择框变化

<a-select
                  v-model="form.sex"
                  placeholder="请选择性别"
                  style="width: 100%"
                  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  @change="changeSex"
                >
                  <a-select-option :value="0"> 未知 </a-select-option>
                  <a-select-option :value="1"></a-select-option>
                  <a-select-option :value="2"></a-select-option>
                </a-select>

令他强制更新

//性别改变
    changeSex() {
      this.$forceUpdate();
    },

其他的表单组件遇到这种问题也可以这样。比如输入框

<a-form-model-item label="名称" prop="name">
                <a-input v-model="form.name" placeholder="请输入名称" @change="onChange"/>
              </a-form-model-item>
onChange() {
      this.$forceUpdate();
    },

你可能感兴趣的:(vue.js,ant-design-vue)