iRCjH89w

1<template>
2  <div>
3    <v-row v-for="(button, key) in buttons" :key="key">
4      <router-link v-if="key < 6" tag="span" :to="button.path">
5        <v-btn class="btn" color="primary" :outlined="key !== curIndex">
6          {{ button.name }}
7        </v-btn>
8      </router-link>
9      <v-btn v-if="key === 6" class="btn" color="green" :disabled="isFollow"
10             @click="onFollow">
11        {{ button.name }}
12      </v-btn>
13      <v-btn v-if="key === 7" class="btn" color="error" :disabled="!isFollow"
14             @click="onDelete">
15        {{ button.name }}
16      </v-btn>
17    </v-row>
18  </div>
19</template>
20
21<script>
22
23import api from '@/components/api';
24
25export default {
26  name: 'FriendsAccountNavButtons',
27  props: ['curIndex', 'nickName'],
28  data() {
29    return {
30      isFollow: false,
31      buttons: [
32        {
33          name: 'Вернуться в свой личный кабинет',
34          path: '/user-info',
35        },
36        {
37          name: 'Данные пользователя',
38          path: `/friend-info/${this.nickName}`,
39        },
40        {
41          name: 'Достижения в обучении',
42          path: `/friend-edu-courses/${this.nickName}`,
43        },
44        {
45          name: 'Статистика акций',
46          path: `/friend-statistics/${this.nickName}`,
47        },
48        {
49          name: 'Подписки',
50          path: `/friend-friend-list/${this.nickName}`,
51        },
52        {
53          name: 'Подписчики',
54          path: `/friend-followers/${this.nickName}`,
55        },
56        {
57          name: 'Подписаться',
58        },
59        {
60          name: 'Отписаться',
61        },
62      ],
63    };
64  },
65  mounted() {
66    this.isFollow = this.$store.state.user.follows
67      .some((follow) => follow.nickName === this.nickName);
68  },
69  methods: {
70    onDelete() {
71      this.isFollow = false;
72      api.deleteFollow(this.nickName);
73    },
74    onFollow() {
75      this.isFollow = true;
76      api.setFollow(this.nickName);
77    },
78  },
79};
80</script>
81
82<style scoped>
83.btn {
84  margin: 10px 15px;
85}
86</style>
87