Рендер социальных сетей через цикл

client/src/views/contacts.vue

@@ -10,15 +10,26 @@
     <div class="contacts__content">
       <div v-if="contacts" class="contacts__info">
         <div v-for="(item, index) in contactsField" :key="index">
-          <div class="text contacts__item">
+          <div
+            v-if="item.title !== dictionaryFields.socials"
+            class="text contacts__item"
+          >
             <span class="title">{{ item.title }}</span>
             {{ item.data }}
           </div>
+          <div v-else class="contacts__socials">
+            <span class="title">{{ item.title }}</span>
+            <div
+              v-for="(href, social) in item.data"
+              :key="social"
+              class="contacts__social"
+            >
+              <a :href="href" :class="['contacts__social', social]"></a>
             </div>
-        <span class="title">Соц. сети</span>
-        <div></div>
           </div>
-      <div class="contacts__map">
+        </div>
+      </div>
+      <!-- <div class="contacts__map">
         <div
           class="contacts__map-frame"
           style="position: relative; overflow: hidden"
@@ -40,7 +51,7 @@
             style="position: relative"
           ></iframe>
         </div>
-      </div>
+      </div> -->
       <FormKit
         v-model="formData"
         type="form"
@@ -116,39 +127,32 @@ export default {
         phone: 'Телефон',
         address: 'Адрес',
         email: 'Почта',
+        socials: 'Соц. сети',
       },
     };
   },
   computed: {
     contactsField() {
-      const address =
+      const address = this.formatAddress(this.contacts);
-        this.contacts.city && this.contacts.street && this.contacts.house
-          ? `г. ${this.contacts.city}, ул. ${this.contacts.street}, д. ${this.contacts.house}`
-          : null;
-
       const phone = this.contacts.phone;
       const email = this.contacts.email;
+      const socials = {
+        ['m--telegram']: this.contacts.telegram_url,
+        ['m--vk']: this.contacts.vk_url,
+      };
 
       const fields = {
         address,
         phone,
         email,
+        socials,
       };
 
       const fieldsWithoutNull = this.removeNullFields(fields);
       return this.createArrayContacts(this.dictionaryFields, fieldsWithoutNull);
     },
-    socialsField() {
-      const socials = {
-        telegram: this.contacts.telegram_url,
-        vk: this.contacts.vk_url,
-      };
-
-      return this.removeNullFields(socials);
-    },
   },
   created() {
-    // Получаем объект с бэка
     app.getSupportInfo().then((responce) => {
       this.contacts = { ...responce };
     });
@@ -156,7 +160,6 @@ export default {
   mounted() {},
   methods: {
     submitHandler() {},
-    // Метод удаляет из объекта ключи с null
     removeNullFields(obj) {
       const result = {};
 
@@ -173,7 +176,6 @@ export default {
       return result;
     },
 
-    // Метод формирует массив, на основе словаря и объекта
     createArrayContacts(dictionary, fields) {
       const result = [];
 
@@ -185,6 +187,12 @@ export default {
 
       return result;
     },
+    formatAddress(contacts) {
+      if (contacts.city && contacts.street && contacts.house) {
+        return `г. ${contacts.city}, ул. ${contacts.street}, д. ${contacts.house}`;
+      }
+      return null;
+    },
   },
 };
 </script>