0

我有以下代码使用来自 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”而不是标签名称来迎接（因为我总是加载数组中的第一项，我也需要显示它）。

从下拉列表中选择的每个后续选项都针对值和标签正确完成。

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

4

2 回答 2

1

原来的问题是s中没有找到el-selects 的初始值（via ） ，所以显示了未知值。鉴于OP关于不同值类型的答案以及显示的 ，原因很可能是初始化为(a )，而这些值都是s：v-model="selectTagPicker"optionel-selectel-select0selectTagPicker"0"StringoptionNumber

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

原始问题的演示

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

OP 解决方案的演示

或者，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>

替代解决方案的演示 1

id另一种解决方案是使用选项项目中的现有道具（例如， ）作为option的值，然后初始化selectTagPicker为该道具的值：

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

替代解决方案 2 的演示

于 2020-07-26T02:55:42.653 回答
0

问题在于值类型。这是一个数字，进一步的计算是使用字符串。

如果您需要字符串，请使用：:value="String(tagIndex)"，反之亦然。

于 2018-05-25T15:38:38.293 回答