ドロップダウンリストからAjaxを送信

私はAxiosでAJAX呼び出しを送信してユーザーの役割を変更しようとしています。ボタンはクリックされず、選択時に即座に実行されます。しかし、私は本当に物事を働かせることはできません。ドロップダウンリストからAjaxを送信

これは私のドロップダウンメニューである：

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

そして、これが私のaxios方法

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

あるコンソールは何もしてエラーなし言わない..

出典

2017-10-02 Adam

何をして働いていないのですか？ – thanksd

実行されていませんか？ – Adam

'console.log（ '動作しているようです'）という行が呼び出されていないことを意味していますか？ – thanksd

バートはoption、コメントで言ったように要素にはクリックイベントがありません。

代わりにselect要素にchangeイベントリスナーを使用してください。

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>

出典

2017-10-02 18:34:41 thanksd

ああ、それは '

ドロップダウンリストからAjaxを送信

答えて