b-list-group-item中的v-bind在带有boootstrap-vue的vue CLI应用中不起作用

Question

我有一个使用vue-CLI制作的应用程序，包括bootstrap-vue。在我的App.vue中，我正在使用axios来获取一些示例JSON数据。我使用 b-list-group-item （引导标签）生成一个列表，并希望在每个元素中绑定一个键（ v-bind：key =“ result.ItemId” < / strong>）。这是行不通的。在html中，不会显示“键”。

这是代码段：

 <b-list-group >
      <b-list-group-item
        href="#"
        class="flex-column align-items-start"
        v-for="result in post"
        v-bind:key="result.ItemId"
      >
        <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> 

这是没有键绑定的呈现的html：

这是JSON结果：

0: {ItemId: "10075328", ItemHeading: "news im November", ItemSubHeading: "unter news",…}
Date4Itemnew: "24.11.2019"
ItemDetails: "lorem ipsum"
ItemHeading: "news im November"
ItemId: "10075328"
ItemSubHeading: "unter news"
u_date: "1574550000"

我尝试了所有可能的方法来绑定它。请帮忙。

Answer 1

首先，您必须通过键[result.ItemHeading]的值在json文件中循环，之后，您必须将此值绑定到具有相同值的props名称的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>