<template>
  <select :value="role" @input="updateRole($event.target.value)" class="form-control">
    <option v-for="role of roles" :key="role" :value="role">
      {{role}}
    </option>
  </select>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'RoleSelector',
  props: {
    roles: Array,
    required: true
  },
  computed: {
    ...mapState({
      role: state => state.userInfo.role
    })
  },
  methods: {
    ...mapMutations(['setRole']),
    updateRole (val) {
      this.setRole({ role: val })
    }
  }
}
</script>
