Блог

Я пытаюсь сгенерировать список некоторых определенных переменных, используя v-for .

У меня есть список некоторых строк… ["Electronics","Furniture", "Cloths", "Sports", "Entertainment", "Others"] и в каждом теге <li> я хочу сгенерировать некоторые <img> и <a> пометить пользовательским текстом.

Итак, я бы представил список со всеми вышеперечисленными вещами, но ничего не отображается. Как я могу изменить свой код, чтобы сгенерировать список этих элементов?

Код в App.vue

 <template>
  <div id="app h-100">

    <Header></Header>

    <div class="center-page h-100">
      <Navigation></Navigation>
    </div>

  </div>
</template>

<script>
  import Header from "@/components/TheHeader";
  import Navigation from "@/components/TheNavigation";

  export default {
    name: 'App',
    components: {
      Navigation,
      Header
    }

  }
</script>
  

Это иерархия моего проекта. Этот код находится внутри TheHeader .

 <ul id="example" class="menu-dropdown">
   <li v-for="item in items" :key="item" class="center align-self-center">
      <img class="float-left" href="@/assets/logo.png" src="@/assets/logo.png"  />
       <a href="#"><h3>{{item}}</h3></a>
   </li>
</ul>


<script>
    import Vue from "vue";

    new Vue({
        el: '#example',
        data:{
            items:["Electronics","Furniture", "Cloths", "Sports", "Entertainment", "Others"]
        }
    })

    export default {
        name: 'Header',
        props:{},
    }

</script>
  

Прежде всего, вам нужно сохранить один экземпляр vue в одном компоненте. Также не забывайте о <template> теге.

 <template>
    <ul id="example" class="menu-dropdown">
        <li v-for="item in items" :key="item" class="center align-self-center">
            <img class="float-left"/>
            <a href="#"><h3>{{item}}</h3></a>
        </li>
    </ul>
</template>


<script>
    export default {
        name: 'TheHeader',
        props: {},
        data() {
            return {
                items: ["Electronics", "Furniture", "Cloths", "Sports", "Entertainment", "Others"]
            }
        }
    }
</script>  

правильно добавьте ключ в for

v-for=»элемент в элементах»: ключ = «item.index»