以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：
在使用 Vue.js 和 Element UI 的 el-select 组件时，确实可能会遇到在启用 allow-create 属性时第一次选择无法获取值的问题。以下是一些可能的解决方案和建议：
1. 确保 v-model 绑定的变量正确初始化
首先，确保 xzjcxform.jcyj 变量在组件初始化时已经正确初始化。如果这个变量没有初始值，可能会导致一些意外的行为。
2. 使用 @blur 或 @focus 事件
在 el-select 组件中，你可以使用 @blur 或 @focus 事件来处理用户输入的值。这样，你可以在用户失去焦点或获得焦点时获取并处理值。
<el-select
v-model="xzjcxform.jcyj"
placeholder="请选择"
allow-create
default-first-option
filterable
value-key="name"
@change="namechange"
@blur="handleBlur"
ref="nameSel"
>
<el-option
v-for="item in jcyjoptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
handleBlur() {
const value = this.xzjcxform.jcyj;
console.log(value, "handleBlur value");
// 可以在这里处理 value
}
3. 使用 watch 来监视 xzjcxform.jcyj
你可以在 Vue 实例中使用 watch 来监视 xzjcxform.jcyj 的变化，并在变化时处理值。
export default {
data() {
return {
xzjcxform: {
jcyj: null,
},
jcyjoptions: [
// 初始化选项
]
};
},
watch: {
'xzjcxform.jcyj': function (newVal, oldVal) {
console.log(newVal, "watch newVal");
// 处理 newVal
}
},
methods: {
namechange(value) {
console.log(this.xgjcxform.flxgjcyj, "this.xgjcxform.flxgjcyj");
console.log(this.$refs.nameSel.createdLabel, "this.$refs.nameSel.createdLabel");
console.log(value, "value");
},
handleBlur() {
const value = this.xzjcxform.jcyj;
console.log(value, "handleBlur value");
// 可以在这里处理 value
}
}
}
4. 处理 allow-create 属性
当用户使用 allow-create 属性手动输入选项时，el-select 会将输入的文本作为选项的值。你需要确保在 namechange 方法中正确处理这种情况。
namechange(value) {
console.log(this.xgjcxform.flxgjcyj, "this.xgjcxform.flxgjcyj");
console.log(this.$refs.nameSel.createdLabel, "this.$refs.nameSel.createdLabel");
console.log(value, "value");
if (this.$refs.nameSel.createdLabel) {
// 用户手动输入的选项
const newOption = {
value: value,
label: value
};
this.jcyjoptions.push(newOption);
this.xzjcxform.jcyj = value; // 更新 v-model 绑定的值
}
},
5. 检查控制台输出
从你提供的截图中可以看到一些控制台输出，但信息不完整。确保检查控制台输出，看看是否有任何错误或警告信息，这可能会帮助你更好地理解问题所在。
通过以上步骤，你应该能够解决第一次选择时无法获取值的问题，并正确处理 allow-create 属性。希望这些建议对你有帮助！
