CODEWITHSUNDEEP
asp.net-mvcvue.js
Dominik Willaford
Dominik Willaford

Reputation: 313

Getting selected value of select list in Vue

I have been working on getting the selected value from a select list and storing that value as a data object in Vue. My issue is that the value is not being stored in the Vue data object. I have looked at trying to use the onchange or v-model.lazy, but I'm not really sure if these are best suited for this situation.

I have a select list that was a dropdownlistfor which I converted to a select list for an easier linking of the Vue data object and the select list.

<select id="Users" v-model="Selected">
    <option>--Select--</option>
    @foreach(var item in list)
    {
        <option id="@item.User" value="@item.Department">@item.User</option>
    }
</select>

I then tried to display the value from the select list inside of a p tag for testing purposes

<p id="test">{{ Selected }}</p>

var selection = new Vue({
   el: '#test',
   data: {
      Selected: 'Hello'
   }
})

Any help or suggestions would be appreciated.

Upvotes: 0

Views: 1362

Answers (1)

Pierre Said
Pierre Said

Reputation: 3820

What you have should work just if you just put everythin within the same Vue template.

<div id="test">
  <div>
    <select id="Users" v-model="Selected">
      <option>--Select--</option>
      @foreach(var item in list) {
      <option id="@item.User" value="@item.Department">@item.User</option>
      }
    </select>
    {{ Selected }}
  </div>
</div>

var selection = new Vue({
  el: '#test',
  data: {
    Selected: 'Hello'
  }
})

An example of that : 

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    Selected: "B"
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="Users" v-model="Selected">
    <option>--Select--</option>
    <option id="1" value="A">A</option>
    <option id="2" value="B">B</option>
    <option id="3" value="C">C</option>
    <option id="4" value="D">D</option>
  </select>
 Selected: {{ Selected }}
</div>

Upvotes: 1

Related Questions