Get Value From Selected Dropdown Vue Js

Question

I have a problem, I really confused about how to get value from form binding vue js. I have tried --> https://v2.vuejs.org/v2/guide/forms.html#Select. But I always getting error such as --> Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. What's wrong with my code ?

Here is my code :

data: function() {
  return {
    data: {
      options: {},
      selected: ''
    }
  };
},
methods: {
  Search: function() {
    var vm = this;

    var types = [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ];

    vm.data.options = types;

    console.log(vm.data.selected);
  }
}

Here is my html code :

<select v-model="selected" class="form-control sl">
    <option v-for="option in data.options" v-bind:value="option.id">
        {{ option.value }}
    </option>
</select>

Don't use vm.data.options and vm.data.selected. When Vue creates an instance, the data properties are set as getters and setters on the main object, so it is vm.options and vm.selected. Also, at the point you are doing the console.log, there is nothing selected. You should do your console.log somewhere else. — OwChallie
– OwChallie, Commented Aug 21, 2017 at 7:15

kevguy · Accepted Answer · 2017-08-21 09:03:02Z

4

The methods is not to be used this way, and you don't actually need any methods at all to get the value. Here's a working example:

const app = new Vue({
  el: '#app',
  data: {
    selectedOption: undefined,
    chosenColor: 'transparent',
    colorMappings: {
      ID: 'red',
      Title: 'green',
      Category: 'blue',
      'Nama User': 'orange'
    },
    widthMappings: {
      ID: '2px',
      Title: '4px',
      Category: '6px',
      'Nama User': '8px'
    },
    types: [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ]
  },
  watch: {
    selectedOption(newVal) {
       this.chosenColor = this.colorMappings[newVal]
    }
  },
  computed: {
    chosenWidth() {
      return this.widthMappings[this.selectedOption] || '1px'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <select v-model="selectedOption">
    <option disabled value="">Please select one</option>
    <option v-for="type in types" v-bind:value="type.value">{{type.value}}</option>
  </select>
  <span v-bind:style="{ 'background-color': chosenColor, 'border': 'solid ' + chosenWidth + ' black' }">Selected: {{ selectedOption }}</span>
</div>

edited Aug 21, 2017 at 9:03

answered Aug 21, 2017 at 8:29

kevguy

4,4381 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

userpr Over a year ago

Thanks for your answer. I mean selectedOption not shown but should be processed inside methods

kevguy Over a year ago

Okay, how do you want selectedOption to be based on the selected value in the dropdown list?

userpr Over a year ago

Because I have to process its value for my search case

userpr Over a year ago

I just want {{ selectedOption }} so I can give the condition based on user input

kevguy Over a year ago

Oh, it's easy, just use a computed value.

|

choasia · Accepted Answer · 2017-08-21 08:38:54Z

2

@kevlai22 already gave you a runnable code snippet, I'd like to tell you why you got the warning message Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option..
It's simply because you return your data object with a nested data object, so v-model="selected" won't work but v-model="data.selected" will. Actually you don't need to return a nested object but just use code like this.

data: function() {
  return {
      options: [],
      selected: ''
  };
},

Check the working demo.

answered Aug 21, 2017 at 8:38

choasia

10.9k6 gold badges42 silver badges63 bronze badges

2 Comments

userpr Over a year ago

Now I understand. Thank you for helping me. Your code is working.

choasia Over a year ago

@userpr glad it helped :>

OwChallie · Accepted Answer · 2017-08-21 08:47:55Z

Sorry, misread your post slightly, so ignore the data part. Didn't realise you created a data object within data. Below is a sample of code that should closely match yours. The problem here is that when clicking on the button, it will add the new elements to search drop-down, but you haven't actually selected anything yet, so the console output will be an empty string. If you then select something and click the button again, you will get a value.

Vue.component('select-component', {
	template: '<div>\
  <select v-model="data.selected" class="form-control sl">\
    <option v-for="option in data.options" v-bind:value="option.id">\
      {{ option.value }}\
    </option>\
  </select>\
  <button v-on:click="Search">Populate List</button>\
</div>',
  data: function() {
    return {
      data: {
        options: {},
        selected: ''
      }
    };
  },
  methods: {
    Search: function() {
      var vm = this;

      var types = [
        {
          "id": "id",
          "value": "ID"
        },
        {
          "id": "title",
          "value": "Title"
        },
        {
          "id": "category",
          "value": "Category"
        },
        {
          "id": "username",
          "value": "Nama User"
        }
      ];

      vm.data.options = types;
			
      console.log(vm.data.selected);
    }
  }
});

var vm = new Vue({
	el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <select-component></select-component>
</div>

Just a note, I also changed v-model="selected" to v-model="data.selected" as your selected variable is a property of the data object which is the only variable you have made available at this scope.

Diego Mauricio Guerrero · Accepted Answer · 2020-05-15 19:50:04Z

0

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

answered May 15, 2020 at 19:50

Diego Mauricio Guerrero

1712 silver badges5 bronze badges

Collectives™ on Stack Overflow

Get Value From Selected Dropdown Vue Js

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related