vue.js - 不应用带有 'el-select' 的初始标签

Question

我使用 Vue.js 的 Element UI 框架中的 el-select 编写了以下代码:

<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>

这里的问题是，在第一次加载时，不应用标签，而是显示值(在我的例子中只是一个数组索引)，并且用户总是收到“0”，而不是标签名称(因为我总是加载数组中的第一项，并且我也需要显示它)。

随后从下拉列表中选择的选项对于值和标签都正确完成。

如何确保在第一次加载时应用正确的标签(应该是标签名称)？

Answer 1

最初的问题是 el-select在 v-model="selectTagPicker" 中找不到 的初始值(通过 option ) s，所以el-select显示未知值。鉴于 OP's answer关于不同的值类型并且 el-select显示0 ，原因很可能是 selectTagPicker被初始化为"0" (a String )，而 option值都是 Number s:

<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

转换option值为String (通过模板中的 :value="String(tagIndex)")解决了该问题，因为第一个项目将被分配 "0" ，匹配 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

或者，OP 可以更改 selectTagPicker 的初始值。至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

另一个解决方案是使用选项项中的现有 Prop (例如 id )作为 option的值，然后初始化selectTagPicker到该 Prop 的值:

<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