我想獲取所選選項輸入的文本並將其顯示在其他地方。我知道如何使用jQuery做到這一點，但我想知道如何使用Vuejs來做到這一點。如何使用vuejs獲取所選選項的文本？
以下是我們在jQuery中的工作方式。我的意思是選擇選項的文本不是值。
var mytext = $("#customerName option:selected").text();
這裏是我的HTML
<select name="customerName" id="">
<option value="1">Jan</option>
<option value="2">Doe</option>
<option value="3">Khan</option>
</select>
{{customerName}}
現在我怎麼能夠顯示其下所選擇的選項。像Jan，Doe，Khan？
我這個問題，在這裏我需要從獲得的數據屬性的選擇選項，這是我處理它的方式：
<select @change="handleChange">
<option value="1" data-foo="bar123">Bar</option>
<option value="2" data-foo="baz456">Baz</option>
<option value="3" data-foo="fiz789">Fiz</option>
</select>
，並在Vue公司的方法：
methods: {
handleChange(e) {
if(e.target.options.selectedIndex > -1) {
console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
}
}
}
但你可以改變它得到innerText或什麼的。如果你使用jQuery，你可以將$(e).find(':selected').data('foo')或$(e).find(':selected').text()縮短一點。
如果你是一個模型綁定到選擇元素，如果沒有設定值（像它會在提交表單），它只會返回值（如果設置），或選擇的內容。
你可以找到它了Vue的文檔在這裏：http://vuejs.org/guide/forms.html#Select
使用V模型：
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
在你的情況，我想你應該做的：
<select name="customerName" id="" v-model="selected">
<option>Jan</option>
<option>Doe</option>
<option>Khan</option>
</select>
{{selected}}
這裏是一個工作小提琴：https://jsfiddle.net/bqyfzbq2/
它正在選擇值（1,2,3）。我想顯示名稱 –
您可以擺脫這些值，我更新了它。 – Mteuahasan
你的例子沒有價值，這就是它顯示字母A，B和C的原因。如果我們有價值，該怎麼辦？ –
我想你的價值觀應該在JS中。然後，您可以輕鬆操縱它。只需添加：
data: {
selected: 0,
options: ['Jan', 'Doe', 'Khan']
}
您的標記將是清潔：
<select v-model="selected">
<option v-for="option in options" value="{{$index}}">{{option}}</option>
</select>
<br>
<span>Selected: {{options[selected]}}</span>
由於th1rdey3指出的那樣，你可能需要使用複雜的數據和值不能簡單的是數組的索引。仍然可以使用對象鍵而不是索引。 Here is the implementation。
你可以使用Cohars風格，或者你也可以使用方法。數據保存在options變量中。 showText方法找出所選值文本並將其返回。一個好處是你可以將文本保存到另一個變量，例如selectedText
HTML：
<div id='app'>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br>
<span>Selected: {{ showText(selected) }}</span>
</div>
JAVASCRIPT：
var vm = new Vue({
el: '#app',
data: {
selected: 'A',
selectedText: '',
options: [{
text: 'One',
value: 'A'
}, {
text: 'Two',
value: 'B'
}, {
text: 'Three',
value: 'C'
}]
},
methods: {
showText: function(val) {
for (var i = 0; i < this.options.length; i++) {
if (this.options[i].value === val){
this.selectedText = this.options[i].text;
return this.options[i].text;
}
}
return '';
}
}
});
的jsfiddle顯示demo
我覺得這裏的一些答案都有點太複雜了，所以我想提供一個簡單的解決方案。我只打算在例如在Vue公司的實例，然後使用一個事件處理程序，並留下諸如像模型綁定等
<select @change="yourCustomMethod">
<option value="1">One</option>
<option value="2">Two</option>
</select>
：
...
methods: {
yourCustomMethod: function(event) {
var key = event.target.value, // example: 1
value = event.target.textContent; // example: One
}
}
...
這將返回整個選擇中的所有文本選項，而不僅僅是選定的選項。 – surfer190
假設你有一個客戶列表，並在模型選擇的客戶，如下面的例子應該正常工作：
<select v-model="theCustomer">
<option :value="customer" v-for="customer in customers">{{customer.name}}</option>
</select>
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1>
相反的定義值僅作爲ID，您可以用兩個屬性的對象中選定值綁定：和值文本。 例如與產品：
<div id="app">
<select v-model="selected">
<option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">
{{ product.name }}
</option>
</select>
</div>
然後你就可以通過 「價值」 訪問文本：
<h1>Value:
{{selected.id}}
</h1>
<h1>Text:
{{selected.text}}
</h1>
var app = new Vue({
el: '#app',
data: {
\t selected: '',
products: [
{id: 1, name: 'A'},
{id: 2, name: 'B'},
{id: 3, name: 'C'}
]
}
})<div id="app">
<select v-model="selected">
<option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
</option>
</select>
<h1>Value:
{{selected.id}}
</h1>
<h1>Text:
{{selected.text}}
</h1>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>的外模板我訪問了名的選項是這樣的：
let option_name = this.options[event.target.options.selectedIndex].name
爲此採取這種方法來設置的模板：
定義你的選擇在一個數組一樣 [{"name":"Bar","value":1},{"name":"Baz","value":2}] ...等
把你的選項組件的data功能 <script>export default {function data(){return { options }}}</script>
裝入options使用模板中v:for： <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>
使用@change="getOptionName"的select元素：
<select @change="getOptionName">
在你methods得到名字：在這種情況下
getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }
注意objectoptions在event.target.options沒有任何與您的數據命名爲options ...希望這將避免混淆
因此，一個更先進的方法，但我相信當所有設置正確獲取名稱並不可怕，雖然這可能會更容易。
如果你找到你想要的東西，請考慮將問題標記爲回答:) – Cohars