Javascript 在select上获取v-select文本

我看到了一些关于v-select和插槽的文档，但不知道是否可以将其应用到我的示例中

我只需要获取所选的文本（而不是值），并在代码中的某个地方使用它：

newvue({
el:“应用程序”，
vuetify:新的vuetify（），
数据：{
国家：{}，
已选择的文本：“”，
国家：[
{值：“a”，文本：“alpha”}，
{值：“b”，文本：“beta”}，
{值：“g”，文本：“gamma”}
]
},
方法：{
更改：（newValue）=>{
//对课文做点什么
//“阿尔法”、“贝塔”或“伽马”
console.log（newValue）；
}
}
});

我选择的文本是：{{state}
您需要将
返回对象
道具添加到


newvue({
el:“应用程序”，
vuetify:新的vuetify（），
数据：{
状态：空，
已选择的文本：“”，
国家：[
{值：“a”，文本：“alpha”}，
{值：“b”，文本：“beta”}，
{值：“g”，文本：“gamma”}
]
},
方法：{
更改：（newValue）=>{
//对课文做点什么
//“阿尔法”、“贝塔”或“伽马”
console.log（newValue.text）；
}
}
});

我选择的文本是：{state&&state.text}
您的
状态
对象同时包含
值
和
文本
属性。如果将
值
更改为
键
v-select可识别此更改，您可以通过
此状态
访问
文本
属性。像这样：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    state: {},
    selectedText: "",
    states: [
      { key: "a", text: "alpha" },
      { key: "b", text: "beta" },
      { key: "g", text: "gamma" }
    ]
  },
  methods: {
    change: (newValue) => {
      // do something with the text
      // "alpha", "beta", or "gama"
      console.log(newValue); // Also returns text attribute instead of key
    }
  }
});


我选择的文本是：{{state}
编辑：
我发现的最佳选择是对所选文本使用
computed属性，而不更改当前代码（在启动代码段后进入完整页面以正确查看输出）：


newvue({
el:“应用程序”，
vuetify:新的vuetify（），
数据：{
国家：[
{代码：“a”，名称：“Ameriga Fatela”}，
{代码：“b”，名称：“玻利维亚格兰德”}，
{代码：“c”，名称：“Comore Potentia”}
],
国家：“b”
},
方法：{
getCountryCode（）{
返回“c”；//这里没有c.name！
},
更改（）{
this.country=this.getCountryCode（）；
}
},
计算：{
countryName（）{
返回this.countries.find（（c）=>c.code==this.country）.name；
}
}
});

当前代码为{country}
当前名称为{countryName}
按脚本更改为“{getCountryCode（）}”
您可以使用
this.state.text
访问所选值。@除了不正确之外，{state}更改为“a”、“b”键您是否使用
vue选择
或
vue搜索选择
模块？@除了您有代码笔，这里有代码，我不理解您在代码笔中使用
state.text
来显示所选文本属性的问题，它可以正常工作。在上面的代码中，您使用
state
而不是
state.text
。但正如在codepen
this.state.text
中所看到的，它清楚地返回所选的文本值。只是不要将它作为
@change
的参数传递，而是使用数据属性。我不想返回对象，我只想在changeOk上恢复选定的文本，所以我进行了编辑以获取选定的文本（拥有对象后应该很容易），我不知道只返回文本的方法。老实说，我不明白接收一个对象并使用其中一个字段的问题。您不可能为函数使用
state.text
？可能我只需要更改代码，然后在框上生成一些“更改”事件，为了将完整的价值放在目标中，我在回答中更清楚地解释了我使用这种方法的问题。你能看一下吗？谢谢
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <label>my selected text is: {{state}}</label>
      <v-row align="center">
        <v-col cols="3">
          <v-select v-model="state" :items="states" @change="change"></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>