Question

所以我试图用axios发送一个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);
              });
        }
    },

控制台没有说什么也没有错误..

Answer 1

正如Bert在评论中所说，option元素没有点击事件。

使用change元素上的select事件侦听器。

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      roles: [{id:1, name: 'foo'}, {id:2, name: 'bar'}],
      userRole: 'foo',
    }
  },
  methods: {
    changeRole() {
      console.log('gets here')
    }
  }
})

＆＃13;

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

＆＃13;

从下拉列表中提交Ajax

1 个答案: