Initial label with 'el-select' is not applied

Question

I have the following code using el-select from Element UI framework for Vue.js:

<el-select v-model="selectTagPicker" @change="handleTagChange(selectTagPicker)">
     <el-option v-for="(tag, tagIndex) in allTags" :key="tag.id" :value="tagIndex" :label="tag.name">
          {{ tag.name }}
     </el-option>
</el-select>

The problem here is that on the first load, the label is not applied, but it shows the value instead (which in my case is just an array index), and the user is always greeted with "0", instead of the tag name (since I always load the first item in the array, and I need to show that as well).

Every subsequent selection of the option from the dropdown is done properly for both values and labels.

How can I make sure to apply a proper label (which should be a tag name), on the first load as well?

Answer 1

The original problem was that the el-select's initial value (via v-model="selectTagPicker") was not found in the options, so el-select displayed the unknown value. Given the OP's answer regarding differing value types and that the el-select displayed 0, the cause was likely that selectTagPicker was initialized to "0" (a String), while the option values were all Numbers:

<template>
  <el-select v-model="selectTagPicker">
    <el-option
        v-for="(tag,tagIndex) in allTags"
        :key="tag.id"
        :value="tagIndex" 👈 Number
        :label="tag.name"
      >
      {{tag.name}}
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      allTags: [...],
      selectTagPicker: "0" 👈 String (❌does not match any values)
    }
  }
}
</script>

demo of original problem

Converting the option values to String (via :value="String(tagIndex)" in the template) resolves the issue because the first item would be assigned "0", matching the inital value of selectTagPicker:

<template>
  <el-select v-model="selectTagPicker">
    <el-option
        v-for="(tag,tagIndex) in allTags"
        :key="tag.id"
        :value="String(tagIndex)" 👈 String (✅first value matches `selectTagPicker`)
        :label="tag.name"
      >
      {{tag.name}}
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      allTags: [...],
      selectTagPicker: "0" 👈 String
    }
  }
}
</script>

demo of OP's solution

Alternatively, the OP could've changed the initial value of selectTagPicker to 0 (a Number):

<template>
  <el-select v-model="selectTagPicker">
    <el-option
        v-for="(tag,tagIndex) in allTags"
        :key="tag.id"
        :value="tagIndex" 👈 Number
        :label="tag.name"
      >
      {{tag.name}}
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      allTags: [...],
      selectTagPicker: 0 👈 Number (✅matches first value)
    }
  }
}
</script>

demo of alternate solution 1

Another solution is to use an existing prop (e.g., id) from the option item as the option's value, and then initialize selectTagPicker to that prop's value:

<template>
  <el-select v-model="selectTagPicker">
    <el-option
        v-for="tag in allTags"
        :key="tag.id"
        :value="tag.id" 👈
        :label="tag.name"
      >
      {{tag.name}}
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    const allTags = [...]
    return {
      allTags,
      selectTagPicker: allTags[0].id 👈
    }
  }
}
</script>

demo of alternate solution 2

Answer 2

The problem was with the value type. It was a number and a further calculation was using string.

If you need a string, use: :value="String(tagIndex)" or vice versa.