Los datos de selección de Element-ui se hacen eco del problema de mostrar números. La verificación de el-select falla y aparecen números arábigos.

Parámetros de inicialización

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>

 

 

Después de que el backend transmite datos al frontend, el cuadro desplegable muestra el resultado como un número.

Recientemente encontré un problema. Después de que el backend devolvió el resultado, el enlace bidireccional del front-end repitió el resultado como un número. Después de analizar el motivo, se descubrió que el tipo de datos era inconsistente, lo que provocó la excepción de eco.

solución

Simplemente convierta el valor de la opción al tipo de carácter.

1	:valor="evaluar.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>