关于下拉列表选择事件

Vue代码如下:

<template>

<div class="panel-body">
    <div class="container">
        <div>
                <div class="form-group">
                    <label for="name">选择角色:</label>
                    <select>
                        <option v-for="r in roles">
                            <a v-on:click="clickRole(r.id)">{r.role}</a>
                        </option>
                    </select>
                </div>

        </div>
    </div>
    <a v-for="role in roles" v-on:click="clickRole(role.id)">{role.role}</a>
</div>

</template>

<script>

var data = {
    roles: [],
}
export default {
    data() {
        return data;
    },
    methods: {
        clickRole(id) {
            console.log(id)
        }
    },
    mounted() {
        axios.get('/roles/all').then(function (response) {
            data.roles = response.data
        })
    }
}

</script>

在下拉列表中的clickRole()方法不生效,在其他的a标签中生效。请问如何在列表中的clickRole()方法生效。谢谢!

option 标签内是不能有子元素的,你可以看看最终生成的 DOM 里应该是没有 a 标签。

你可以监听 selectchange 事件来监听选择的改变,然后进行相应操作。

  <select @change="roleChanged" v-model="selectedRole">
    <option v-for="role in roles" :value=role.id>{ role.name }</option>
  </select>
Yawenina
修改的评论也不能少于六个字哦!
youl 回复 Yawenina
修改的评论也不能少于六个字哦!
youl
修改的评论也不能少于六个字哦!