首頁猿問在選擇時獲取 v-select 文本

在選擇時獲取 v-select 文本

JavaScript

慕妹3242003 2022-06-09 17:15:59

我看到了一些關(guān)于 v-select 和 slot 的文檔，但我真的不明白我是否可以將它應(yīng)用于我的示例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>

查看完整描述

3 回答

叮當貓咪

TA貢獻1776條經(jīng)驗獲得超12個贊

您需要將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);

}

});

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

編輯：好的，根據(jù)您的方法，解決方案是使用國家代碼在國家列表中找到適當?shù)膰覍ο蟛⒃O(shè)置它。

以下是您將如何解決它：

new Vue({

el: "#app",

vuetify: new Vuetify(),

data: {

country: "c",

countries: [{

code: "a",

},

{

code: "b",

},

{

code: "c",

}

]

},

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

}

});

<v-app>

<v-container>

<div>current code is >{{country.code}}<</div>

<div>current name is >{{country.name}}<</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>

反對回復(fù) 2022-06-09

有只小跳蛙

TA貢獻1824條經(jīng)驗獲得超8個贊

您的states對象同時包含value和text屬性。如果您更改value為keyv-select 會識別更改，您可以text通過this.state. 像這樣：

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

}

});

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

反對回復(fù) 2022-06-09

瀟湘沐

TA貢獻1816條經(jīng)驗獲得超6個贊

我發(fā)現(xiàn)的最佳選擇是對所選文本使用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;

}

});

<v-app>

<v-container>

<div>current code is >{{country}}<</div>

<div>current name is >{{countryName}}<</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 here）使用 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;

}

});

<v-app>

<v-container>

<div>current code is >{{country.code}}<</div>

<div>current name is >{{country.name}}<</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>

但是，在這兩種情況下，我們都應(yīng)該重新計算國家名稱。這是不好的。想象一下，要構(gòu)建組合框，我們必須進行繁重的操作……每次都重新計算它很耗時，而且確實不是最優(yōu)的……

反對回復(fù) 2022-06-09

3 回答
0 關(guān)注
477 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

在選擇時獲取 v-select 文本

在選擇時獲取 v-select 文本

3 回答

添加回答