element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

初始化参数

return {
      fields: [
        {"title":"景区","id":0},
        {"title":"酒店","id":1}
      ],
      evaluates: [
        {"title":"好评","id":0},
        {"title":"中评","id":1},
        {"title":"差评","id":2}
      ],
}

<el-form-item label="评价" prop="appraise">
          <el-select v-model="form.appraise" placeholder="请选择">
            <el-option
              v-for="evaluate in evaluates"
              :key="evaluate.id"
              :label="evaluate.title"
              :value="evaluate.id"
              clearable
            >
              {{ evaluate.title }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <el-select v-model="form.classification"  placeholder="请选择">
            <el-option
              v-for="item in fields"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              clearable
            >
              {{ item.title }}
            </el-option>
          </el-select>
        </el-form-item>

element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题,ui,vue.js,elementui

文章来源地址https://www.toymoban.com/news/detail-577833.html

后端传送数据给前端后，下拉框回显结果为数字！

最近遇到个问题后端返回结果后.前端双向绑定回显结果为数字.分析原因后发现是数据类型不一致导致回显异常

解决方案

把option的value转为字符类型即可

1	:value="evaluate.id+''"

<el-form-item label="评价" prop="appraise">
          <el-select v-model="form.appraise" placeholder="请选择">
            <el-option
              v-for="evaluate in evaluates"
              :key="evaluate.id"
              :label="evaluate.title"
              :value="evaluate.id+''"
              clearable
            >
              {{ evaluate.title }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <el-select v-model="form.classification"  placeholder="请选择">
            <el-option
              v-for="item in fields"
              :key="item.id"
              :label="item.title"
              :value="item.id+''"
              clearable
            >
              {{ item.title }}
            </el-option>
          </el-select>
        </el-form-item>

element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题,ui,vue.js,elementui