0

I am really new in Vue and I am getting this error in my code which is quite basic navbar

<template>
  <nav
    class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block"
    id="templatemo_nav_top"
  >
    <div class="container text-light">
      <div class="w-100 d-flex justify-content-between">
        <div v-for="info in contactInfos">
          <i :class="{info.icon}"></i>
          <a class="navbar-sm-brand text-light text-decoration-none" href="#">{{info.contact}}</a>
        </div>
        <div>
          <a class="text-light" href="#" target="_blank" rel="sponsored"
            ><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i
          ></a>
          <a class="text-light" href="#" target="_blank"
            ><i class="fab fa-instagram fa-sm fa-fw me-2"></i
          ></a>
          <a class="text-light" href="#" target="_blank"
            ><i class="fab fa-twitter fa-sm fa-fw me-2"></i
          ></a>
          <a class="text-light" href="#" target="_blank"
            ><i class="fab fa-linkedin fa-sm fa-fw"></i
          ></a>
        </div>
      </div>
    </div>
  </nav>
</template>
<script>
export default {
  data() {
    return {
      contactInfos: [
                { icon: 'fa fa-envelope mx-2', contact: 'info@company.com'},
                { icon: 'fa fa-phone mx-2', contact: '000-000-0000'},
            ]
    };
  },
};
</script>

So I dont know what I am doing wrong, I basically want to show contact info inside the div.

Thanks...

magic bean
  • 787
  • 12
  • 39
  • 1
    Does this answer your question? [vue-language-server : Elements in iteration expect to have 'v-bind:key' directives](https://stackoverflow.com/questions/47608379/vue-language-server-elements-in-iteration-expect-to-have-v-bindkey-directiv) – Michal Levý Jul 12 '21 at 16:39
  • If you haven't read the Vue documentation, I recommend it. Here is a link that address your specific question: [List Rendering - Maintaining State](https://vuejs.org/v2/guide/list.html#Maintaining-State). You should probably start at the top of the linked page. – Tim Jul 12 '21 at 20:07

0 Answers0