Question

61

Get Value From Selected Dropdown Vue Js

rated 0 times [ 62] [ 1] / answers: 1 / hits: 24340 / 7 Years ago, mon, august 21, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sidneyh

Add To Favorites

Follow

Total Points: 118

Total Questions: 108

Total Answers: 105

Location: Mali

Member since Fri, Jun 18, 2021

3 Years ago

sidneyh questions

1 Next.js, redirect to 404 page inside getServerSideProps

Tue, Jun 7, 22, 00:00, 2 Years ago

1 How to generate a UUID in NextJs?

Wed, Apr 13, 22, 00:00, 2 Years ago

1 Can electronjs be used for websites

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to change scroll speed to be smooth?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Can not pass date to nivo line chart

Fri, Apr 24, 20, 00:00, 4 Years ago

View All

answered 7 Years ago osvaldo · Accepted Answer

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.