你是否遇到这样的需求

element textarea 文本输入框统计字数 elementui获取输入框的值_javascript


element textarea 文本输入框统计字数 elementui获取输入框的值_vue.js_02


element textarea 文本输入框统计字数 elementui获取输入框的值_elementui_03

实现的功能就是,当我们选择输入完成后,点击查询时,把数据传到后台。

是不是感觉需求也不是很复杂呀,错!大错特错!

因为select本身带有自己的事件

element textarea 文本输入框统计字数 elementui获取输入框的值_elementui_04

显然,这些个步骤都需要放在表单里,把表单作为一个响应式的数据,实时变化。

在事件里面我开始做的处理就是选择一被触发,先把选择到的value作为表单数据的一个键,然后把后面输入框的数据作为value的值。
问题出现:每当触发赋值后,却发现传过去的竟然是undefined!因为选择器是在输入框的数据变化前把数据赋给对应的字段,那时输入框没有数据,自然也就是undefined。
第二次尝试:直接在表单中,把选择项对应的字段定义好,并且输入框的数据也用一个字段直接接收,在选择触发后,直接赋值。
问题来了:我到底该怎么把数据的值赋给选择项的字段呢?
我尝试了两种方案:

①this.$set(表单名,属性名,属性值)

因为select的change事件里面有自带的value,所以this.$set(this.form,value,this.form.数据的字段名)

②this.form=JSON.parse(JSON.stringify(json).replace(/需要替换的属性名/g,新的属性名));

无一例外,这两种方案都不可行,别问我为什么这样做,我承认我病急乱投医了,逮啥用啥!
经历过一上午的抓耳挠腮,终于!茅塞顿开,不到10分钟就把这个问题解决了。
第一步:在form中设置选择项的字段名

schoolSerialCode:'',//校方流水号
  bankSerialCode:'',  //银行流水号

第二步:html部分也要做一些处理

<span class="add-item">流水号:</span>
          <a-select
            style="width: 120px"
            @change="handleChange"
            default-value="schoolSerialCode"
          >
            <a-select-option value="schoolSerialCode">
              校方流水号
            </a-select-option>
            <a-select-option value="bankSerialCode">
              银行流水号
            </a-select-option>
          </a-select>
          <a-input
            style="width: 50%"
            placeholder="请输入校方流水号"
            v-if="serialCode == 'schoolSerialCode'"
            v-model="form.schoolSerialCode"
          />
          <a-input
            style="width: 50%"
            placeholder="请输入银行流水号"
            v-else
            v-model="form.bankSerialCode"
          />

第三步:data里面设置一个用于判断的字段,并给默认值

serialCode: "schoolSerialCode",

第四步:事件处理部分

// 流水号的选择
    handleChange(value) {
      this.serialCode = value;
    },

回顾一下,感觉自己写的好复杂😂
但是目前我没有在网上看见解决方案,所以,大家有更简洁的办法吗?
希望不吝赐教!