any Vuejs Expert ??

@hero21 I believe if you bind your select tag with a model you will get the desired functionality.

    <select v-model="customerName">
        <option value="1">Jan</option>
        <option value="2">Doe</option>
        <option value="3">Khan</option>
    </select>

This will bind customerName to 1, 2, or 3. If you wish to have the text use :

    <select v-model="customerName">
        <option value="Jan">Jan</option>
        <option value="Doe">Doe</option>
        <option value="Khan">Khan</option>
    </select>

Hopefully this helps you!

thank you @infernobass7 . I search a lot, there is no way to get the text with vuejs. The way you said is not solving my problem.

If you use options without the value attribute, you'll get just the text. But, if you are fetching the data from a DB it may not be what you are looking for. The only way I've found to fix the problem (ain't exactly 'clean') is to bind the value attribute to the entire object, like so:

//HTML

<select v-model="selected">
    <option v-for="test in tests" :value="test">{{ test.text }}</option>
</select>

{{ selected.text }}


//JS
new Vue({
    el: 'body',
    selected: {},
    tests: [
        { value: 1, text: 'some text' },
        { value: 2, text: 'some other text' },
        { value: 3, text: 'some more text' },
        { value: 4, text: 'text' },
    ]
})

But, again, if you use the select value attribute with the ids fetched from the DB, is not a good workaround.

Thanks @zeratulmdq .

Yep, actually I am fetching data from database and I need the value as will as the text, which is not possible. :(

selected is the test object.

Can you setup something like a jsfiddle where you can demostrate what you are looking for? how are you displaying the options? Hard coded or dynamically populated from database?

I was looking for the same sort of thing, because my database needs the value of the selected item (in this case the id), but my view needs the text (in this case, the partner_type_name) to update what is displayed. It might be useful if Vue provided a way to directly bind the select tag to both the value and the text. But without a Vue-specific method, the solution I arrived at is to use a little basic javascript to loop through the data array and find the corresponding value.

My data array:

"partner_types": [
    {
      "id": "0",
      "partner_type_name": "Make a selection"
    },
    {
      "id": 1,
      "partner_type_name": "Alumni"
    },
    {
      "id": 2,
      "partner_type_name": "Businesses"
    },
    {
      "id": 3,
      "partner_type_name": "Community Groups"
    },
    {
      "id": 4,
      "partner_type_name": "Educators/Schools"
    },
    {
      "id": 5,
      "partner_type_name": "Health Care"
    },
    {
      "id": 6,
      "partner_type_name": "Government"
    },
    {
      "id": 7,
      "partner_type_name": "Media"
    },
    {
      "id": 8,
      "partner_type_name": "UW Campuses"
    },
    {
      "id": 9,
      "partner_type_name": "Other"
    }
  ]

And here's my code:

    addPartner: function(partner) {
      var newPartnerName;
      for (var key in this.partner_types) {
        if (key == partner.partner_type_id) {
          newPartnerName = vm.partner_types[key].partner_type_name;
        }
[then do something with newPartnerName]
      }

It's more lines of code than the jQuery method, but (maybe) it feels a little more data-based than pulling a value from the DOM. If someone knows a better way, I'd be interested in hearing about it.

This is how I am doing dynamic select lists in my current project:

<select class="form-control" name="filters" @change="pagerReset" v-model="filters.client">
  <option value="">All Clients</option>
  <option v-for="client in clients | orderBy 'name'" :value="client.id">{{ client.name }}</option>
</select>

For my purposes I don't need to display the active client by name anywhere other than in this select element directly, but if I did, that's really easy to accomplish with lodash/underscore..

Using the same variable names I've got in play in that snippet above, something like this will get your the info:

activeClient = _.find(this.clients, {id: this.filters.client});
if (typeof activeClient !== 'undefined') {
  console.log(activeClient.name);
}

You can use v-el, if it's a component

<select v-el:elSelect v-model="modelSelect">
  <option value="1">First</option>
</select>

console.log(this.$els.elSelect.text);

I'm not sure if you need 'text' at all or maybe a slightly different pointer here, but try it out, removing .text will give you an object of options.

If anyone is still looking for a solution for this. Here is what I would do:

HTML

<select name="customerName" id="" @change="changeSelect($event)">
// If you are printing this from an array say: 
"user in users" --> then 
         <option value="{{user.id + ' - ' + user.name">{{ user.name }}</option> //otherwise    
    //--> this  
    <option value="1 - Jan">Jan</option> 
         
 </select>

JavaScript

changeSelect(event){
    let user = _.split(event.target.value, '-', 2); //using lodash here. You can also just use js split func
    let id = user[0] // your id
    let name = user[1] //your name
}

Good gracious jQuery seems so much easier.

It seems each example people were adding in this discussion was doing something different.

If all you are doing is "getting the text of a selected option" then yes, jQuery is much easier.

The more complicated the needed functionality the more likely Vue will result in much less code and be much easier to understand than the jQuery solution.

save your data as json , then in vue , parse them

https://jsfiddle.net/starjou/vheenzmo/6/

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:

{{ product.name }}

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

Value: {{selected.id}}

Text: {{selected.text}}

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

Html

<select name="customerName" v-model="selectedCustomer">
           <option v-for="customer in customers" value="customer">
                     {{customer.name}}
           </option> 
</select>
    {{selectedCustomer.name}}

JavaScript

data: {
    selectedCustomer: {
         id: '',
         name:'',
    },
    customers: [],
}

Did this on my phone so I didn't wrap the JavaScript inside a Vue instance but you should get the jist. Just populate the customers array with some data and it should work.

Even if you are fetching data from the selected value it will work in this case, you'll be passing the entire selected customer object to your back end, which has the id of the customer.

You can pass the selected object.

        <select class="form-control" v-model="obj_" :change="onChange()">
          <option value="" selected disabled>--- Select one ---</option>
          <option v-for="o in obj" v-bind:value="o">{{o.text}}</option>
        </select>

data () {
  return {
            obj_: '',
            obj: [
              { value: "1", text: "Text 1"},
              { value: "2", text: "Text 2"},
              { value: "3", text: "Text 3"}
            ]
  }
},
methods: {
        onChange () {
          console.log( this.obj_.value + '  ' + this.obj_.text );
        }
}

Hi. At the end this was my solution:

Template:

<select  v-model="selectedShoppingItemId" @change="watchSelectedItemId($event)" >
                <option data-item-type="Service" v-for="service in services" :key="service.id" :value="service.id" >{{ service.name }} {{ moneySymbol }}{{ service.price }}</option>
            </select>

Script:

methods: {
            watchSelectedItemId: function(event){
                console.log(event.target.options[event.target.selectedIndex].attributes['data-item-type'].value);
            }
        }

event.target.selectedIndex is the key!

The same logic can be applied to any attribute inside the selected option. Hope this is useful for others!