CODEWITHSUNDEEP
javascriptvue.js
splunk
splunk

Reputation: 6815

Retrieve selected text from select

I'm using VueJS 2 (with this template) and below is what I've done so far: 

<template>
     <select id="dropDown" v-model="mytrack">
           <option value="">Select track</option>
           <option v-for="track in tracksList" :value="track.circuitId">{{ track.name }}</option>
     </select>
     <button type="submit" @click="retrieveByTrack(track.circuitId)">
                                Search
     </button>
</template>

<script>  
    export default {
                data() {

                    return {
                        tracksList: []
                    };
                },
                created: {
                     // here I fill tracksList[] with a list of tracks
                },
                methods: {
                  retrieveByTrack(trackId){
                   }
                }
        }
</script>

I want to be able to select an option from the select element and when I click the submit button I should call retrieveByTrack(track.circuitId) method passing the option value selected in the select element.

Upvotes: 0

Views: 53

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13674

Simple like that. I created fiddle for you:

https://jsfiddle.net/npw7fgta/

<div class='col-xs-12'>
<hr/>
<div id="app">
  <pre>{{ $data |json }}</pre>
  <select v-model='result'> <option v-for="task in tasks" :value="task.id">{{ task.name }} </option> </select>
</div>
</div>

And JS:

var vm = new Vue({
  el: "#app",
  data: {

    tasks: [
    { id: 0 , name: 'First task'},
    { id: 5, name: 'fifth task'}
    ]

  }
});

Then you have task/track.id available in result so you can do whatever you want.

Upvotes: 1

Related Questions