CODEWITHSUNDEEP
vue.jsvuejs2axios
Adam
Adam

Reputation: 1299

Submit Ajax from dropdown list

So im trying to send a AJAX call with axios to change user roles. No buttons clicked, instant execution upon selection. But I can't really get things working.

This is my dropdown menu:

<select>
<option v-on:click="changeRole()" name="permission_id" v-for="role in roles" :value="role.id" :selected="role.name === userRole">{{ role.name }}</option
</select>

And this is my axios method

    methods: {
        changeRole: function(user){
            axios.post('URL')
              .then(response => {
                console.log('seems to work')
              })
              .catch(function (error) {
                console.log(error);
              });
        }
    },

Console says nothing and no errors..

Upvotes: 0

Views: 180

Answers (1)

thanksd
thanksd

Reputation: 55644

As Bert said in the comments, option elements don't have a click event.

Use the change event listener on the select element instead.

new Vue({
  el: '#app',
  data() {
    return {
      roles: [{id:1, name: 'foo'}, {id:2, name: 'bar'}],
      userRole: 'foo',
    }
  },
  methods: {
    changeRole() {
      console.log('gets here')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <select @change="changeRole">
    <option 
      name="permission_id" 
      v-for="role in roles"
      :value="role.id" 
      :selected="role.name === userRole"
    >
      {{ role.name }}
    </option>
  </select>
</div>

Upvotes: 1

Related Questions