javascript - How to get the text of the selected option using vuejs?

Question

I want to get the text of a selected option input and display it somewhere else. I know how to do it using jQuery but I want to know how can we do it using Vuejs.

Here is how we do in jQuery. I mean the text of Selected Option not the value.

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

Here is my HTML

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

 {{customerName}}

Now how can I display the selected option under it. like Jan, Doe, Khan ?

question from:https://stackoverflow.com/questions/35748162/how-to-get-the-text-of-the-selected-option-using-vuejs

Answer 1

Instead of define the value only as the id, you can bind the selected value with an object with two attributes: value and text. For example with products:

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

Then you can access to the text through the "value":

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

Working example

var app = new Vue({
  el: '#app',
  data: {
  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>