Vue, get value and name of select option

vue select
get selected value of dropdown in vue js
v-select get selected value
vue-select example
vue-select object
vue select value from array
vue select default value
vue dropdown select

I'm using html and laravel to build select box options in a foreach loop

This works and populates with ID as value and name as the option. What I want, and can't quite figure out here, is how to take my function when I call it and get the id and value as separate vue options for a post axios call I'm going to make.

So when I select the option and submit the form to call the function, how can I get the ID as one prop and the name as another?

<select>
@foreach($details as $detail)    
<option value="{{$detail->id}}">{{$detail->name}}</option>
@endforeach
</select>

new Vue({
  data: {
    detailID: [''],
    detailName: ['']
  },
  methods: {
   let data = {

                detailID: this.detailID,
                detailName: this.detailName
            };
  }
})

Use v-model to bind the selection to your component data. SeeForm input bindings:

new Vue({
   data: {
      detailID: ""
   },
   // now you can access the id with this.detailID in your post request
})
<select v-model="detailID">
  @foreach($details as $detail)    
  <option value="{{$detail->id}}">{{$detail->name}}</option>
  @endforeach
</select>

Vue.js get selected option on @change, Use v-model to bind the value of selected option's value. Here is an example. < select name="LeaveType" @change="onChange($event)"� Load the options in the template using v:for: <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option> Use @change="getOptionName" on the select element: <select @change="getOptionName"> In your methods get the name: getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

Here is a code example just using vue.js

Template

<div id="app">
  <select v-model="selectedDetailId">
    <option v-for="detail in details" v-bind:value="detail.id">
      {{ detail.name }}
    </option>
  </select>
</div>

Script

new Vue({
  el: '#app',
  data: {
    selectedDetailId: null,
    details: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
      { id: 3, name: 'C' }
    ]
  },
  methods:{
    post(){
       //your selected Id is this.selectedDetailId
    }
  }
})

You can find more details and examples in the official Vue.js docs. https://vuejs.org/v2/guide/forms.html#Value-Bindings

How to get the text of the selected option using vue ?, Hi, I want to get the text of a selected option input and display it It might be useful if Vue provided a way to directly bind the select tag to both the value and You can also just use js split func let id = user[0] // your id let name� Hi Dear Friends here u can know to vue.js – Set default value to option select menu Example. In this post we will show you Best way to implement vuejs select dropdown option by value, hear for javascript – vue js how to set option value selected with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You would need to set a v-model to your select element and bind the entire object to each option element instead of just the id like you are doing in your example. Here is a codepen with a simple example.

How to work with Objects as Select Option values? - Get Help, I'm trying to do something like this… <div> <select v-model="product.carrier" class="custom-select"> <option v-bind:value="{id: carrier.id, name: carrier.name}" � VueJS Data rendering in to the select field along with the value and text; Get selected option from the select field; Get multiple selection options from the select field. In next tutorial we are going to learn dynamic attributes binding and class name binding in VueJS – VueJS 2.0 dynamic Attribute binding Class Name binding

Vue JS Get Dropdown Selected Value Example, We can get selected value of select box using onchange event in vue. js. we will create one vue js function that will call with on change of select box option. you can see bellow full example, that will help you to understand how works onchange event to get value of selected option. Hi, 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.

Vue JS Get Selected Option Text Example, get selected text of dropdown in vue js, how to get select text value in vue js, JS Get Selected Option Text Example - ItSolutionStuff.com</title>. In this tutorial, I’ll show you how to get selected option from a dropdown list in Vue.js. Suppose you have a user settings form, which has a country field. And you want to get selected value and assign it to the data component or perform some other actions.

Getting and Setting, The most common use case for vue-select is to have the chosen value synced with a vue-select returns the whole object as dropdown value upon selection. We're just concerned about getting the book title added, and our server side code� If the initial value of your v-model expression does not match any of the options, the <select> element will render in an “unselected” state. On iOS, this will prevent the user from being able to select the first item, because iOS does not fire a change event in this case.

Comments
  • Not clear what you want and how you use it. Give us more info
  • Ok that does make sense, but I want to send the value for $detail->name as well. How can I grab both as individual bindings for my post?
  • Generally I would think you don't need $detail->name if $detail->id uniquely define a detail item? With that said, you should be able to filter your $details array by id to find the name?
  • ok so that works for the value, but I'm still confused using the split: How can I set the first option (id) to detailID, and the 2nd option (name) to detailName?
  • AFAIK, each option is supposed to have only one unique identifier as its value, so you can't directly bind one select to two different values. And of course, you can pass your $details array into your Vue instance something like this. And then you can access your data more elegantly.
  • I tried this with detail.name for the name of the option but it just shows on the frontend detailname
  • Yes, use {{detail.name}} instead {{option.name}}, sorry. Did you initialize the Vue? You need to wrap the template with a div and set an id for this, then add the el property in the vue instance. I just edited the answer with this additional information.