[Vuejs]-V-bind in b-list-group-item not working in vue CLI-app with boootstrap-vue

by

1👍

First you have to loop inside the json file by value of key [ result.ItemHeading ] , After you have to bind this value inside props by same name of value props: [“ItemHeading”, “ItemSubHeading”, “ItemDetails”] 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
   <b-list-group>
      <b-list-group-item
         href="#"
         class="flex-column align-items-start"
         v-for="result in post"
         v-bind:key="result.ItemId"
         v-bind:ItemHeading="result.ItemHeading"
         v-bind:ItemSubHeading="result.ItemSubHeading"
         v-bind:ItemDetails="result.ItemDetails"
      >
         <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1">{{ result.ItemHeading }}</h6>
            <small>{{ result.ItemSubHeading }}</small>
         </div>

         <p class="mb-1">{{ result.ItemDetails }}</p>
      </b-list-group-item>
   </b-list-group>
</template>

<script>
export default {
   props: ["ItemHeading", "ItemSubHeading", "ItemDetails"]
};
</script>
👤Yasser Mahmoud

Leave a comment