Javascript 如何在vuetify v-select的列表和菜单中使用不同的值？

如何更改示例，以便在菜单中显示“Florida，FL”之类的内容，但在实际的v-select中，仅显示“FL”

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
选择：[{州：'Florida'，缩写：'FL'}]，
项目：[
{州：'佛罗里达'，缩写：'佛罗里达'}，
{州：'Georgia'，缩写：'GA'}，
{州：'内布拉斯加州'，缩写：'东北'}，
{州：'California'，缩写：'CA'}，
{州：'纽约'，缩写：'纽约'}，
],
}
},
})

定制项目

您不必更改设置，只需将

@change

处理程序添加到组件中，并使用方法处理它。注意将发出的事件传递给您的方法（$event）。通过将发出的事件的值传递给方法，可以使用选定的对象（事件实际上将该对象传递给方法）

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
选择：[{
menuText:'佛罗里达州'，
州：'佛罗里达'，
缩写：“FL”
}],
项目：[{
州：'佛罗里达'，
缩写：“FL”
},
{
州：“格鲁吉亚”，
缩写：“GA”
},
{
州：'内布拉斯加州'，
缩写：“NE”
},
{
州：'加利福尼亚'，
缩写：“CA”
},
{
州：'纽约'，
缩写：“纽约”
},
],
}
},
计算：{
menuItems（）{
返回此.items.map（e=>{
返回{
menuText:e.state+'，'+e.abbr，
E
}
})
}
},
方法：{
对数值（e）{
this.select=e
控制台日志（e）
}
}
})

/*.v-select\u selection.v-select\u selection--逗号{
显示：无；
}*/
.v-文本字段前缀{
颜色：#242729；
}

定制项目
{{item.menuText}}

您不必更改设置，只需将

@change

处理程序添加到组件中，并使用方法处理它。注意将发出的事件传递给您的方法（$event）。通过将发出的事件的值传递给方法，可以使用选定的对象（事件实际上将该对象传递给方法）

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
选择：[{
menuText:'佛罗里达州'，
州：'佛罗里达'，
缩写：“FL”
}],
项目：[{
州：'佛罗里达'，
缩写：“FL”
},
{
州：“格鲁吉亚”，
缩写：“GA”
},
{
州：'内布拉斯加州'，
缩写：“NE”
},
{
州：'加利福尼亚'，
缩写：“CA”
},
{
州：'纽约'，
缩写：“纽约”
},
],
}
},
计算：{
menuItems（）{
返回此.items.map（e=>{
返回{
menuText:e.state+'，'+e.abbr，
E
}
})
}
},
方法：{
对数值（e）{
this.select=e
控制台日志（e）
}
}
})

/*.v-select\u selection.v-select\u selection--逗号{
显示：无；
}*/
.v-文本字段前缀{
颜色：#242729；
}

定制项目
{{item.menuText}}

不

返回对象

。默认情况下，返回

项值

。不要

返回对象

。默认情况下，返回

项值

。当我选择某个内容时，它会在文本字段中显示长名称而不是短名称，我希望在文本字段中显示短名称，并在菜单中同时显示两个名称。此外，我还需要多个选择（对不起，我忘了将示例代码编辑为多个）。我修改了代码段以使用计算值，而不是直接使用数据-通过这种方式，您可以更改v-select组件使用和返回的对象。您可以根据需要显示或处理选择数据值。除了“编辑”下的部分外，此答案似乎与问题完全无关。当我选择某个内容时，它在文本字段中显示长名称而不是短名称，我希望在文本字段中显示短名称，并在菜单中同时显示两个名称。此外，我还需要多个选择（对不起，我忘了将示例代码编辑为多个）。我修改了代码段以使用计算值，而不是直接使用数据-通过这种方式，您可以更改v-select组件使用和返回的对象。您可以根据需要显示或处理选择的数据值。除“编辑”下的部分外，此答案似乎与问题完全无关。