如何在Vuetify的v-select组件change事件中获取field属性值

嘿，我来帮你搞定这个问题！在Vuetify的v-select组件里获取field属性值其实不用纠结event.target的问题，有几个简单直接的办法：

1. 直接在事件回调中传递field值 #

这是最直接的方式，你可以在触发change事件时，把field的计算值作为参数一起传给处理函数。注意要把field改成动态绑定（加冒号:），这样Vue才会执行表达式而不是把它当成字符串：

<v-select 
  v-model="$root.$data.currentStudent.LivingConditions" 
  :disabled="!editing" 
  :items="$root.$data.livingconditions" 
  :field="@SecurityHelper.SimpleCrypt('LivingConditions')" 
  label="Bopæl" 
  item-text="text" 
  item-value="value" 
  @change="SaveChange2($event, @SecurityHelper.SimpleCrypt('LivingConditions'))" 
></v-select>

然后在SaveChange2方法里直接接收这个参数：

SaveChange2(selectedValue, fieldValue) {
  // 这里的fieldValue就是你要的field属性值
  console.log(fieldValue);
  // 你的保存逻辑代码...
}

2. 使用组件引用（ref）获取属性 #

给v-select添加一个ref标识，之后就能在方法里通过引用直接拿到组件的属性：

<v-select 
  ref="livingConditionsSelect"
  v-model="$root.$data.currentStudent.LivingConditions" 
  :disabled="!editing" 
  :items="$root.$data.livingconditions" 
  :field="@SecurityHelper.SimpleCrypt('LivingConditions')" 
  label="Bopæl" 
  item-text="text" 
  item-value="value" 
  @change="SaveChange2" 
></v-select>

然后在处理函数里通过$refs获取属性：

SaveChange2(selectedValue) {
  const fieldValue = this.$refs.livingConditionsSelect.$attrs.field;
  console.log(fieldValue);
  // 你的保存逻辑代码...
}

3. 将field值存入组件data（更优雅的维护方式） #

如果这个field值需要在多个地方复用，建议把它放到组件的data里统一管理：

// 组件的data选项
data() {
  return {
    livingConditionsField: @SecurityHelper.SimpleCrypt('LivingConditions')
  }
}

然后在模板里引用这个data属性：

<v-select 
  v-model="$root.$data.currentStudent.LivingConditions" 
  :disabled="!editing" 
  :items="$root.$data.livingconditions" 
  :field="livingConditionsField" 
  label="Bopæl" 
  item-text="text" 
  item-value="value" 
  @change="SaveChange2" 
></v-select>

最后在处理函数里直接调用：

SaveChange2(selectedValue) {
  console.log(this.livingConditionsField);
  // 你的保存逻辑代码...
}

内容的提问来源于stack exchange，提问作者Henrik Clausen