• 中文
    • English
  • 注册
    • 查看作者
    • ElementUi框架解决el-select选择器来回切换option选项时,选中的结果值不正确问题

      一、错误代码:

      <div class="el-form-item">
          <label for="region" class="el-form-item__label" style="width: 80px;">选择商品</label>
          <div class="el-form-item__content" style="margin-left: 80px;">
              <el-select v-model="shopObj.id" placeholder="请选择" style="width:100%;">
                  <el-option @click.native="selectShopChange(item)" v-for="item in shopList"
                  :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
              </el-select>
          </div>
         
      </div>
      <script type="text/javascript">
      new Vue({
          el: '#main',
          data: function() {
              return {
                  shopList: [],
                  shopObj: [],
              },
              methods: {
                  selectShopChange(item) {
                      this.shopObj = item;
                      this.paytypeChange(this.paytype);
                  },
              }
       });
       </script>

      上述代码中,el-select是直接绑定整个商品对象shopObj,会导致切换选项时,唯一的id没有成功更新,会出现两个被选中的商品,如下图:

      ElementUi框架解决el-select选择器来回切换option选项时,选中的结果值不正确问题

      二、正确代码:

      <div class="el-form-item">
          <label for="region" class="el-form-item__label" style="width: 80px;">
              选择商品
          </label>
          <div class="el-form-item__content" style="margin-left: 80px;">
              <el-select v-model="shopid" placeholder="请选择" style="width:100%;" clearable @change="$forceUpdate()">
                  <el-option @click.native="selectShopChange(item)" v-for="item in shopList"
                  :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
              </el-select>
          </div>
      </div>
      <script type="text/javascript">
      new Vue({
          el: '#main',
          data: function() {
              return {
                  shopList: [],
                  shopid:0,
                  shopObj: [],
              },
              methods: {
                  selectShopChange(item) {
                      this.shopid = item.id;
                      this.shopObj = item;
                      this.paytypeChange(this.paytype);
                  },
              }
       });
       </script>

      上述代码绑定的是一个独立的shopid变量,这样能保证el-select选中的值永远是唯一的,效果如下:

      ElementUi框架解决el-select选择器来回切换option选项时,选中的结果值不正确问题

    • 1
    • 0
    • 0
    • 126
    • 似水流年

      请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: