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

最新推荐文章于 2024-08-27 15:50:43 发布

是小芬达啊

最新推荐文章于 2024-08-27 15:50:43 发布

阅读量2.7k

点赞数

文章标签： vue.js ant-design-vue

本文链接：https://blog.csdn.net/weixin_52921391/article/details/123992278

版权

今天遇到一个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();
    },