使用elementUI el-select时踩的一个小坑

卤煮使用vue-elementUI时使用el-select,从后台读取数据渲染el-option的value和lable,当卤煮编辑页面是需要从后台取到传给后台的value值,然后卤煮想让el-option显示的是lable值。

            
                
              
              
                
              
              
                
              

卤煮需要的是每一个select对应下的值都匹配v-model的id值,显示为item.dirName,卤煮一开始直接存储id值传递到后台,

当从后台读取数据渲染至页面后,显示的却是id值,这与卤煮想要显示对应id值的dirName意愿不符合,所以卤煮查阅资料,

终于知道了后台返回的值与v-model的值必须为同一类型的值(String或者Number)时才能显示正确,所以卤煮在后台返回时做了类

型转化,转化为同一类型,果然就正常显示了,写此篇为了方便记忆。

/**
     * 场景分类第二类别
     */
    changeTwo(pid) {
      console.log(typeof pid);
      pid = Number(pid);这个转化是重点,转化完成之后就可正常显示
      this.$api.test
        .getSenlist({ pid: pid })
        .then(_data => {
          this.firstStep.sceneType.mostType = pid;
          this.mostTypeList.forEach(item => {
            if (pid == item.id) {
              this.selectName.splice(1, 1, item.dirName);
            }
          });
          this.selectId.splice(1, 1, pid);
          this.classificationList = _data.data.map(item => {
            return { dirName: item.dirName, id: item.id };
          });
          this.isFirstChoosen = this.classificationList.length ? false : true;
        })
        .catch(e => {
          console.log(e);
        });
    },

使用elementUI el-select时踩的一个小坑_第1张图片

你可能感兴趣的:(Vue项目学习)