在选择时获取 v-select 文本

Question

我看到了一些关于 v-select 和 slot 的文档，但我真的不明白我是否可以将它应用于我的示例codepen。

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

new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

    state: {},

    selectedText: "",

    states: [

      { value: "a", text: "alpha" },

      { value: "b", text: "beta" },

      { value: "g", text: "gamma" }

    ]

  },

  methods: {

    change: (newValue) => {

      // do something with the text

      // "alpha", "beta", or "gama"

      console.log(newValue);

    }

  }

});

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>

<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" :text="selectedText"></v-select>

        </v-col>

      </v-row>

    </v-container>

  </v-app>

</div>

Answer 1

您需要将return-object道具添加到<v-select>new Vue({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; state: null,&nbsp; &nbsp; selectedText: "",&nbsp; &nbsp; states: [&nbsp; &nbsp; &nbsp; { value: "a", text: "alpha" },&nbsp; &nbsp; &nbsp; { value: "b", text: "beta" },&nbsp; &nbsp; &nbsp; { value: "g", text: "gamma" }&nbsp; &nbsp; ]&nbsp; },&nbsp; methods: {&nbsp; &nbsp; change: (newValue) => {&nbsp; &nbsp; &nbsp; // do something with the text&nbsp; &nbsp; &nbsp; // "alpha", "beta", or "gama"&nbsp; &nbsp; &nbsp; console.log(newValue.text);&nbsp; &nbsp; }&nbsp; }});<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/><link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script><div id="app">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-container fluid>&nbsp; &nbsp; &nbsp; <label>my selected text is: {{state && state.text}}</label>&nbsp; &nbsp; &nbsp; <v-row align="center">&nbsp; &nbsp; &nbsp; &nbsp; <v-col cols="3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-select :items="states" v-model="state" @change="change" item-text="text" return-object></v-select>&nbsp; &nbsp; &nbsp; &nbsp; </v-col>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>编辑： 好的，根据您的方法，解决方案是使用国家代码在国家列表中找到适当的国家对象并设置它。以下是您将如何解决它：new Vue({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; country: "c",&nbsp; &nbsp; countries: [{&nbsp; &nbsp; &nbsp; &nbsp; code: "a",&nbsp; &nbsp; &nbsp; &nbsp; name: "Ameriga Fatela"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; code: "b",&nbsp; &nbsp; &nbsp; &nbsp; name: "Bolivia Grande"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; code: "c",&nbsp; &nbsp; &nbsp; &nbsp; name: "Comore Potentia"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; methods: {&nbsp; &nbsp; getCountryCode() {&nbsp; &nbsp; &nbsp; return "b"; // have no c.name here!&nbsp; &nbsp; },&nbsp; &nbsp; change() {&nbsp; &nbsp; &nbsp; var newCode = this.getCountryCode();&nbsp; &nbsp; &nbsp; // Since we were getting objects when changing options, we must also set objects&nbsp;&nbsp; &nbsp; &nbsp; this.country = this.countries.filter(country => country.code === newCode)[0];&nbsp; &nbsp; }&nbsp; }});<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script><div id="app">&nbsp; <v-app>&nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; <div>current code is &gt;{{country.code}}&lt;</div>&nbsp; &nbsp; &nbsp; <div>current name is &gt;{{country.name}}&lt;</div>&nbsp; &nbsp; &nbsp; <v-row>&nbsp; &nbsp; &nbsp; &nbsp; <v-col cols="12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-btn @click="change">change by script to 'b'</v-btn>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </vcol>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>

Answer 2

您的states对象同时包含value和text属性。如果您更改value为keyv-select 会识别更改，您可以text通过this.state. 像这样：new Vue({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; state: {},&nbsp; &nbsp; selectedText: "",&nbsp; &nbsp; states: [&nbsp; &nbsp; &nbsp; { key: "a", text: "alpha" },&nbsp; &nbsp; &nbsp; { key: "b", text: "beta" },&nbsp; &nbsp; &nbsp; { key: "g", text: "gamma" }&nbsp; &nbsp; ]&nbsp; },&nbsp; methods: {&nbsp; &nbsp; change: (newValue) => {&nbsp; &nbsp; &nbsp; // do something with the text&nbsp; &nbsp; &nbsp; // "alpha", "beta", or "gama"&nbsp; &nbsp; &nbsp; console.log(newValue); // Also returns text attribute instead of key&nbsp; &nbsp; }&nbsp; }});<div id="app">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-container fluid>&nbsp; &nbsp; &nbsp; <label>my selected text is: {{state}}</label>&nbsp; &nbsp; &nbsp; <v-row align="center">&nbsp; &nbsp; &nbsp; &nbsp; <v-col cols="3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-select v-model="state" :items="states" @change="change"></v-select>&nbsp; &nbsp; &nbsp; &nbsp; </v-col>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>

Answer 3

我发现的最佳选择是对所选文本使用computed属性，而不更改当前代码（在启动代码段后进入FullPage以正确查看输出）：new Vue({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; countries: [&nbsp; &nbsp; &nbsp; { code: "a", name: "Ameriga Fatela" },&nbsp; &nbsp; &nbsp; { code: "b", name: "Bolivia Grande" },&nbsp; &nbsp; &nbsp; { code: "c", name: "Comore Potentia" }&nbsp; &nbsp; ],&nbsp; &nbsp; country: "b"&nbsp; },&nbsp; methods: {&nbsp; &nbsp; getCountryCode() {&nbsp; &nbsp; &nbsp; return "c"; // have no c.name here!&nbsp; &nbsp; },&nbsp; &nbsp; change() {&nbsp; &nbsp; &nbsp; this.country = this.getCountryCode();&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; countryName() {&nbsp; &nbsp; &nbsp; return this.countries.find((c) => c.code === this.country).name;&nbsp; &nbsp; }&nbsp; }});<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script><div id="app">&nbsp; <v-app>&nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; <div>current code is &gt;{{country}}&lt;</div>&nbsp; &nbsp; &nbsp; <div>current name is &gt;{{countryName}}&lt;</div>&nbsp; &nbsp; &nbsp; <v-row>&nbsp; &nbsp; &nbsp; &nbsp; <v-col cols="12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-select v-model="country" :items="countries" item-text="name" item-value="code"></v-select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-btn @click="change">change by script to '{{getCountryCode()}}'</v-btn>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </vcol>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>另一种选择是（Codepen here）使用 Anurag Srivastava 的建议return-object，我返回了对象。但是，它有一些缺点，因为实际上我无法通过代码正确更改值：new Vue({&nbsp; el: "#app",&nbsp; vuetify: new Vuetify(),&nbsp; data: {&nbsp; &nbsp; country: "c",&nbsp; &nbsp; countries: [&nbsp; &nbsp; &nbsp; { code: "a", name: "Ameriga Fatela" },&nbsp; &nbsp; &nbsp; { code: "b", name: "Bolivia Grande" },&nbsp; &nbsp; &nbsp; { code: "c", name: "Comore Potentia" }&nbsp; &nbsp; ]&nbsp; },&nbsp; methods: {&nbsp; &nbsp; getCountryCode() {&nbsp; &nbsp; &nbsp; return "b"; // have no c.name here!&nbsp; &nbsp; },&nbsp; &nbsp; change() {&nbsp; &nbsp; &nbsp; var newCode = this.getCountryCode();&nbsp; &nbsp; &nbsp; this.country = newCode;&nbsp; &nbsp; }&nbsp; }});<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script><div id="app">&nbsp; <v-app>&nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; <div>current code is &gt;{{country.code}}&lt;</div>&nbsp; &nbsp; &nbsp; <div>current name is &gt;{{country.name}}&lt;</div>&nbsp; &nbsp; &nbsp; <v-row>&nbsp; &nbsp; &nbsp; &nbsp; <v-col cols="12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-btn @click="change">change by script to 'b'</v-btn>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </vcol>&nbsp; &nbsp; &nbsp; </v-row>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>但是，在这两种情况下，我们都应该重新计算国家名称。这是不好的。想象一下，要构建组合框，我们必须进行繁重的操作……每次都重新计算它很耗时，而且确实不是最优的……