javascript - b-list-group-item 中的 v-bind 无法在带有 bootstrap-vue 的 vue CLI-app 中工作

Question

我有一个使用 vue-CLI 制作的应用程序，包括 bootstrap-vue。在我的 App.vue 中，我使用 axios 来获取一些示例 JSON 数据。我使用 b-list-group-item (引导标签)生成一个列表，并希望在每个元素中绑定(bind)一个键 (v-bind:key="result.ItemId" )。这是行不通的。在 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，没有键绑定(bind):

这是 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"

我尝试了所有的可能性来绑定(bind)它。请帮忙。

Answer 1

首先，您必须按键 [ result.ItemHeading ] 的值在 json 文件内循环，然后必须使用与值 props 相同的名称将此值绑定(bind)到 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>