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

Posted 2023-02-22

【中文标题】b-list-group-item 中的 v-bind 在带有 bootstrap-vue 的 vue CLI-app 中不起作用

【英文标题】：v-bind in b-list-group-item not working in vue CLI-app with boootstrap-vue

【发布时间】：2020-03-19 11:53:24

【问题描述】：

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

这是代码sn-p：

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

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

【问题讨论】：

Key 仅用于 Vue 正确处理列表项。

这是什么意思？如果我使用“id”或“john”同样的问题。你能解释一下吗？

你的最终目标是什么？ Vue 只将真正需要的内容呈现到 DOM 中。所以，有例如DOM 中没有v-if="true"，但该元素要么存在要么不存在。钥匙也一样。它在 Vue 内部使用，但不渲染到 DOM 中。 key 属性用于向 Vue 指示元素何时应重新呈现其内容。当 key 改变时，Vue 会重新加载该组件。

感谢您的解释。如果我在没有 vue-CLI 的情况下构建应用程序，我可以例如在我的列表项中添加元素（ id= ...）。 <a id="10107333" target="_self" href="#" class="list-group-item flex-column align-items-start list-group-item-action"><div class="d-flex w-100 justify-content-between"><h6 class="mb-1">MusterBank</h6> <small>25.01.2019</small></div> 。我需要一个 ID 或密钥来进一步使用此列表元素。

你有没有尝试像这样绑定id：<b-list-group-item v-for="result in post" :id="result.ItemId">？

【参考方案1】：

首先你必须通过 key [ result.ItemHeading ] 的值在 json 文件中循环，在你必须通过 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>