title: Get Value From Selected Dropdown Vue Js
body: <p>I have a problem, I really confused about how to get value from form binding vue js. I have tried --&gt; <a href="https://v2.vuejs.org/v2/guide/forms.html#Select" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/forms.html#Select</a>. But I always getting error such as --&gt; <strong>Property or method &quot;selected&quot; is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.</strong> What's wrong with my code ?</p>
  <p><strong>Here is my code :</strong></p>
  <pre><code>data: function() {
    return {
      data: {
        options: {},
        selected: ''
      }
    };
  },
  methods: {
    Search: function() {
      var vm = this;
  
      var types = [
        {
          &quot;id&quot;: &quot;id&quot;,
          &quot;value&quot;: &quot;ID&quot;
        },
        {
          &quot;id&quot;: &quot;title&quot;,
          &quot;value&quot;: &quot;Title&quot;
        },
        {
          &quot;id&quot;: &quot;category&quot;,
          &quot;value&quot;: &quot;Category&quot;
        },
        {
          &quot;id&quot;: &quot;username&quot;,
          &quot;value&quot;: &quot;Nama User&quot;
        }
      ];
  
      vm.data.options = types;
  
      console.log(vm.data.selected);
    }
  }
  </code></pre>
  <p><strong>Here is my html code :</strong></p>
  <pre><code>&lt;select v-model=&quot;selected&quot; class=&quot;form-control sl&quot;&gt;
      &lt;option v-for=&quot;option in data.options&quot; v-bind:value=&quot;option.id&quot;&gt;
          {{ option.value }}
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>