47 lines
864 B
Vue
47 lines
864 B
Vue
<template>
|
|
<div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
|
|
{{ data.email }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: "Account",
|
|
components: {},
|
|
props: {
|
|
data: { mail: String, id: Number },
|
|
},
|
|
computed: {
|
|
...mapState(["activeAccount"]),
|
|
},
|
|
methods: {
|
|
...mapMutations(["setactiveAccount"]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 65px;
|
|
text-align: center;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
padding: 5px;
|
|
margin: 3px 0;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.container:hover {
|
|
background-color: aqua !important;
|
|
}
|
|
|
|
.active {
|
|
border: 2px solid white;
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|