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://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>

Solution 1

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.

Solution 2

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>

Solution 3

@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.

Comments

[userpr]

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

[kevguy]

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

[userpr]

Because I have to process its value for my search case

[userpr]

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

[kevguy]

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

[kevguy]

@userpr I've edited my solution, there're two ways to give condition based on user input: watcer and computed. I've used both for demonstration.

[userpr]

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

[choasia]

@userpr glad it helped :>