Wie bekomme ich den Text der ausgewählten Option mit vuejs?

Question

Ich möchte den Text einer ausgewählten Option eingeben und an anderer Stelle anzeigen lassen. Ich weiß, wie man es mit jQuery macht, aber ich möchte wissen, wie wir es mit Vuejs machen können.

Hier ist, wie wir in jQuery tun. Ich meine den Text der ausgewählten Option nicht den Wert.

var mytext = $("#customerName option:selected").text(); 

Hier ist mein HTML

<select name="customerName" id=""> 
     <option value="1">Jan</option> 
     <option value="2">Doe</option> 
     <option value="3">Khan</option> 
    </select> 

{{customerName}} 

Nun, wie kann ich die gewählte Option unter es angezeigt werden soll. wie Jan, Doe, Khan?

Answer 1

ich dieses Problem hatte, wo ich brauchte ein Datenattribut, ausgewählt aus einem erhalten Option, so habe ich es gehandhabt:

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

und in den Vue Methoden:

methods: { 
    handleChange(e) { 
     if(e.target.options.selectedIndex > -1) { 
      console.log(e.target.options[e.target.options.selectedIndex].dataset.foo) 
     } 
    } 
} 

Aber man kann es innerText oder was auch immer zu bekommen ändern. Wenn Sie jQuery verwenden, können Sie $(e).find(':selected').data('foo') oder $(e).find(':selected').text() etwas kürzer sein.

Wenn Sie ein Modell an das select-Element binden, gibt es nur den Wert (falls gesetzt) ​​oder den Inhalt der Option zurück, wenn kein Wert festgelegt ist (wie beim Senden eines Formulars).

Answer 2

Sie es aus in der Vue-Dokumentation finden Sie hier: http://vuejs.org/guide/forms.html#Select

Mit V-Modell:

<select v-model="selected"> 
    <option selected>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 
<br> 
<span>Selected: {{ selected }}</span> 

In Ihrem Fall, ich denke, Sie tun sollten:

<select name="customerName" id="" v-model="selected"> 
    <option>Jan</option> 
    <option>Doe</option> 
    <option>Khan</option> 
</select> 

{{selected}} 

Hier ist eine arbeitende Geige: https://jsfiddle.net/bqyfzbq2/

Answer 3

Ich schätze deine Werte sollte in der JS sein. Dann können Sie es leicht manipulieren. Einfach durch Hinzufügen: wird

data: { 
    selected: 0, 
    options: ['Jan', 'Doe', 'Khan'] 
} 

Ihr Markup sauberer sein:

<select v-model="selected"> 
    <option v-for="option in options" value="{{$index}}">{{option}}</option> 
</select> 
<br> 
<span>Selected: {{options[selected]}}</span> 

Here is the update JSFiddle

Wie th1rdey3 darauf hingewiesen, möchten Sie vielleicht nicht einfach sein Indizes des Arrays können komplexe Daten und Werte verwenden, . Trotzdem können Sie den Schlüssel und nicht den Index verwenden. Here is the implementation.

Answer 4

Sie können Cohars-Stil verwenden oder Sie können auch Methoden verwenden. Daten werden in options Variable gespeichert. Die Methode showText findet den ausgewählten Werttext und gibt ihn zurück. Ein Vorteil ist, dass Sie den Text auf eine andere Variable speichern können, z. 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 zeigt demo

Answer 5

Ich denke, einige der Antworten hier sind ein bisschen zu komplex, also würde ich gerne eine einfachere Lösung anbieten. Ich werde nur einen Event-Handler in dem Beispiel verwenden und auslassen Dinge wie Modell Bindung usw.

<select @change="yourCustomMethod"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

Dann in Ihrem Vue Beispiel:

... 
methods: { 
    yourCustomMethod: function(event) { 
     var key = event.target.value, // example: 1 
      value = event.target.textContent; // example: One 
    } 
} 
... 

Answer 6

Vorausgesetzt Sie haben eine Kundenliste haben und ein ausgewählten Kunden auf Ihrem Modell sollte ein Beispiel wie unten perfekt funktionieren:

<select v-model="theCustomer"> 
    <option :value="customer" v-for="customer in customers">{{customer.name}}</option> 
</select> 
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1> 

Answer 7

Statt nur als ID den Wert definieren, können Sie den ausgewählten Wert mit einem Objekt mit zwei Attributen binden: Wert und Text. Zum Beispiel mit Produkten:

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

Dann können Sie den Text über den "Wert" zuzugreifen:

<h1>Value: 
    {{selected.id}} 
    </h1> 
    <h1>Text: 
    {{selected.text}} 
    </h1> 

Working example

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/vue@2.4.4/dist/vue.js"></script>

Answer 8

Außerhalb der Vorlage Ich greife auf den Namen der Option wie folgt aus:

let option_name = this.options[event.target.options.selectedIndex].name

das diesen Ansatz zu tun, um Ihre Vorlage einzurichten:

Defined Ihre Optionen in einem Array wie [{"name":"Bar","value":1},{"name":"Baz","value":2}] ... etc

Legen Sie Ihre Optionen in der data Funktion des Bauteils <script>export default {function data(){return { options }}}</script>

die Last 0.123.in der Vorlage mit v:for: <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

Verwenden @change="getOptionName" auf dem select Element:

<select @change="getOptionName">

In Ihrem methods den Namen bekommen:

getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

Beachten Sie in diesem Fall die objectoptions in event.target.options hat nichts mit Ihren Daten zu tun namens options ... hoffentlich, dass die Verwechslung zu vermeiden

Also ein fortgeschrittener Ansatz, aber ich glaube, wenn alles richtig eingerichtet ist, ist der Name nicht schrecklich, obwohl Es könnte einfacher sein.