在選擇時獲取 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>

但是，在這兩種情況下，我們都應該重新計算國名。 這是不好的。 想象一下，要構建組合框，我們必須進行繁重的操作……每次重新計算都很耗時，而且真的不是最佳選擇……