在选择时获取 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({ el: "#app", vuetify: new Vuetify(), data: { state: null, 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.text); } } });

 <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 && state.text}}</label> <v-row align="center"> <v-col cols="3"> <v-select :items="states" v-model="state" @change="change" item-text="text" return-object></v-select> </v-col> </v-row> </v-container> </v-app> </div>

编辑：好的，根据您的方法，解决方案是使用国家/地区代码在国家/地区列表中找到适当的国家/地区对象并进行设置。

以下是您解决问题的方法：

 new Vue({ el: "#app", vuetify: new Vuetify(), data: { country: "c", countries: [{ code: "a", name: "Ameriga Fatela" }, { code: "b", name: "Bolivia Grande" }, { code: "c", name: "Comore Potentia" } ] }, methods: { getCountryCode() { return "b"; // have no c.name here! }, change() { var newCode = this.getCountryCode(); // Since we were getting objects when changing options, we must also set objects this.country = this.countries.filter(country => country.code === newCode)[0]; } } });

 <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> <v-container> <div>current code is &gt;{{country.code}}&lt;</div> <div>current name is &gt;{{country.name}}&lt;</div> <v-row> <v-col cols="12"> <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select> <v-btn @click="change">change by script to 'b'</v-btn> </vcol> </v-row> </v-container> </v-app> </div>

Answer 2

您的states对象包含value和text属性。 如果您将value更改为key v-select 会识别更改，您可以通过this.state访问text属性。 像这样：

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
    }
  }
});

<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>

Answer 3

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

 new Vue({ el: "#app", vuetify: new Vuetify(), data: { countries: [ { code: "a", name: "Ameriga Fatela" }, { code: "b", name: "Bolivia Grande" }, { code: "c", name: "Comore Potentia" } ], country: "b" }, methods: { getCountryCode() { return "c"; // have no c.name here! }, change() { this.country = this.getCountryCode(); } }, computed: { countryName() { return this.countries.find((c) => c.code === this.country).name; } } });

 <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> <v-container> <div>current code is &gt;{{country}}&lt;</div> <div>current name is &gt;{{countryName}}&lt;</div> <v-row> <v-col cols="12"> <v-select v-model="country" :items="countries" item-text="name" item-value="code"></v-select> <v-btn @click="change">change by script to '{{getCountryCode()}}'</v-btn> </vcol> </v-row> </v-container> </v-app> </div>

另一种选择是（此处为Codepen ）建议 Anurag Srivastava 使用return-object ，我返回了对象。 但是，它有一些缺点，因为实际上我无法通过代码正确更改值：

 new Vue({ el: "#app", vuetify: new Vuetify(), data: { country: "c", countries: [ { code: "a", name: "Ameriga Fatela" }, { code: "b", name: "Bolivia Grande" }, { code: "c", name: "Comore Potentia" } ] }, methods: { getCountryCode() { return "b"; // have no c.name here! }, change() { var newCode = this.getCountryCode(); this.country = newCode; } } });

 <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> <v-container> <div>current code is &gt;{{country.code}}&lt;</div> <div>current name is &gt;{{country.name}}&lt;</div> <v-row> <v-col cols="12"> <v-select v-model="country" :items="countries" item-text="name" item-value="code" return-object></v-select> <v-btn @click="change">change by script to 'b'</v-btn> </vcol> </v-row> </v-container> </v-app> </div>

但是，在这两种情况下，我们都应该重新计算国名。 这是不好的。 想象一下，要构建组合框，我们必须进行繁重的操作……每次重新计算都很耗时，而且真的不是最佳选择……