ContactMenu.vue

<template>
  <v-list-tile-action v-if="email || phone || phone2">
    <v-menu>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on">
          <v-icon color="blue">fa-comment-dots</v-icon>
        </v-btn>
      </template>

      <v-list>
        <v-list-tile v-if="email" :href="`mailto:${email}`">
          <v-list-tile-action>
            <v-icon>email</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>
            {{ email }}
          </v-list-tile-title>
        </v-list-tile>

        <v-list-tile v-if="phone" :href="`tel:${phone}`">
          <v-list-tile-action>
            <v-icon>phone</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>
            {{ phone }}
          </v-list-tile-title>
        </v-list-tile>

        <v-list-tile v-if="phone2" :href="`tel:${phone2}`">
          <v-list-tile-action>
            <v-icon>phone</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>
            {{ phone2 }}
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-list-tile-action>
</template>

<script>
export default {
  props: ["phone", "phone2", "email"]
};
</script>

Contacts.vue

<template>
  <v-layout fill-height>
    <v-flex>
      <v-toolbar color="white" app>
        <v-toolbar-title>
          <v-text-field
            placeholder="Search"
            prepend-icon="search"
            v-model="search"
            clearable
          ></v-text-field>
        </v-toolbar-title>
      </v-toolbar>
      <v-list subheader>
        <v-subheader inset>Company Contacts</v-subheader>
        <template v-for="(contact, index) in filteredContacts">
          <v-list-tile avatar :key="contact.id">
            <v-list-tile-avatar>
              <v-lazy-image
                :src="profileImage(contact.thumb)"
                :src-placeholder="placeholderImg"
              />
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ contact.first_name }}
                {{ contact.last_name }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{ contact.employee_type }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
            <ContactMenu
              :phone="contact.phone"
              :phone2="contact.phone2"
              :email="contact.email"
            />
          </v-list-tile>
          <v-divider
            v-if="index + 1 < contacts.length"
            :key="index"
          ></v-divider>
        </template>
      </v-list>
    </v-flex>
  </v-layout>
</template>

<script>
import placeholderImg from "@/assets/user-circle-solid.svg";
import VLazyImage from "v-lazy-image";
import ContactMenu from "@/components/contacts/ContactMenu";
export default {
  data() {
    return {
      search: "",
      placeholderImg: placeholderImg
    };
  },
  components: { ContactMenu, VLazyImage },
  computed: {
    contacts() {
      return this.$store.getters.contactList;
    },
    filteredContacts() {
      if (!this.search) return this.contacts;
      let search = this.search.toLowerCase();
      return this.contacts.filter(
        c =>
          c.last_name.toLowerCase().includes(search) ||
          c.first_name.toLowerCase().includes(search) ||
          c.employee_type.toLowerCase().includes(search)
      );
    }
  },
  methods: {
    getContacts() {
      this.$store.dispatch("getContacts");
    },
    profileImage(url) {
      if (url.includes("missing")) {
        return placeholderImg;
      } else {
        return url;
      }
    }
  },
  mounted() {
    this.getContacts();
  }
};
</script>

<style scoped>
.v-list {
  height: 100%;
}

.v-list__tile__sub-title {
  text-transform: capitalize;
}

.v-lazy-image {
  opacity: 0.3;
}

.v-lazy-image-loaded {
  opacity: 1;
}
</style>