The v-bind directive is not functioning as expected within a b-list-group-item component in a Vue CLI application utilizing Bootstrap-vue

I have developed an application using vue-CLI with bootstrap-vue integration. Within my App.vue file, I am utilizing axios to fetch sample JSON data. The objective is to create a list using the b-list-group-item (from Bootstrap) and assign a key to each element using v-bind:key="result.ItemId". However, this key binding does not seem to work as expected. When inspecting the HTML code, no "key" attribute is rendered.

Below is the snippet of code in question:

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

Here is the displayed HTML without key bindings:

https://i.sstatic.net/FlsJC.png

This is the resulting JSON data:

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"

I have attempted various methods to bind the key without success. Any assistance would be greatly appreciated.

javascriptvue.jsbootstrap-4axiosvue-cli

Answer №1

To begin, iterate through the json file using the key [ result.ItemHeading ]. Next, map this value to props with the same name as the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When an element is added to an array with a v-model, it may result in

Currently, I have a series of text input fields generated through a v-for loop with a v-model linked to an array. My goal is to incorporate new elements into the array, which in turn creates additional input fields. While everything seems to be functionin ...

javascriptarraysvue.jsvuejs2v-model

``Display text in the center of a column when viewed on mobile

I am facing some challenges when trying to center text within a specific section of my webpage, particularly in the mobile view. This section is identified by the class about and is contained within a container-fluid div. I also encountered an issue where ...

csstwitter-bootstrapbootstrap-4

Is there a way to delegate the operation of Object3d.toJSON() to a web worker for optimization?

Is there a way to efficiently convert the active scene in threejs to a JSON object? The process seems to slow down as the models get larger, making it difficult to show a progress bar. I attempted sending the threejs scene to a web worker for conversion, ...

javascriptthree.js

Scalable Vector Graphics Form Field

I'm looking to enable user input in one of my SVG text fields when they click on it. Any ideas on how to achieve this? const wrapper = document.getElementById('wrapper'); const text = document.getEl ...

javascripthtmlcsssvg

How to Efficiently Remove Array Elements by Index in Typescript

What is the best way to remove an item by its index using Typescript? For example: let myArray = ['apple', 'banana', 'cherry', 'date']; // How can I delete the item at index 2? ...

javascripttypescript

The setTimeout function fails to behave as intended when used in conjunction with synchronous ajax

Within my code, I have a function that is being invoked multiple times due to iterating through an array of length n and creating 'Plants' with synchronous ajax calls. These calls involve querying the Google Maps API, so it is crucial to throttle ...

javascriptjqueryajaxgoogle-maps

javascript: restrict the quantity of products

As a beginner in javascript, I am currently working on creating a simple RSS reader. However, I am facing a challenge in limiting the number of feeds to 5 items, especially since the target site may have 100 or more feeds. Here's the code snippet I&ap ...

javascriptjqueryarrays

Basic example of jQuery in an ASPX file

I can't figure out why this basic example is not working. In my WebApplication, I have a script: function myAlert() { $("#Button1").click(function () { alert("Hello world!"); }); } In my asp page, I have the following code: < ...

c#javascriptjqueryasp.net

Searching for all unconverted strings in a Vuejs project can be achieved by following these steps

I have recently found myself delving into a Vue.js and Typescript project with legacy code. The project utilizes the vue-i18n library for handling translations, using this.$t in every component to access translations stored in directories like translations ...

typescriptvue.jsinternationalizationtranslation

Steps for accessing a file using HTML form input data:

I have a unique setup with two distinct fields featuring drop-down lists - one for selecting a User and the other for choosing Data. Additionally, I've included a button that is intended to serve as an output based on the selected options from the dro ...

javascripthtmlforms

Maximizing efficiency in JavaScript by utilizing jQuery function chaining with deferred, the .done() function

I am working on retrieving data from multiple functions and want to chain them together so that the final function is only executed when all the data has been successfully loaded. My issue arises when trying to use the .done() method, as it calls the func ...

javascriptjquerydeferredjquery-chaining

creating a countdown timer for the carousel

While experimenting, I decided to create a basic carousel from scratch. Initially, I used onclick="function()" to cycle through the images. Later on, I attempted to replace it with onload="setInterval(function, 4000)", but it seems like something went wron ...

javascripthtmlcarousel

Challenges with Displaying Oversized Images in Mapbox GL JS

I have encountered an issue while using Mapbox GL JS to overlay satellite data over Texas. Despite using accurate geo-coordinates, the image does not align correctly over the state. To resolve this problem, I had to divide the image into 6 separate long im ...

javascriptmapboxgeospatialmapbox-gl-js

Unlock the power of two-way data binding in Vuex using the mapGetter helper

Understanding how Vuex utilizes two-way data binding involves using set() and get() methods on the computed property of the component. This means returning the store state or relevant getter in the get() method, then committing a mutation in the set method ...

vue.jsvuextwo-way-binding

Loading material textures in Three.JS using data URLs - A simple guide

I am currently working with three.js and have successfully combined a mesh (.obj), a material (.mtl), and several textures into a single JSON object. The mesh and material were exported from Blender's wavefront obj export feature. Below is a snippet ...

javascriptjsonthree.jstextures

Troubleshooting objects in Javascript: Understanding the scope problem with 'this'

Here is my code snippet: var tradingInterface = function() { this.json = ''; this.init = function() { $.get( '/whatever',{}, function(data) { this.json = data; // Rebuilds Everything ...

javascript

Javascript Solution for Testing Palindromes in a Linked List

I recently researched the solution for a palindrome problem using Javascript. There is one particular line of code that I am struggling to comprehend, and I'm hoping someone can shed some light on it for me. Here is the code snippet in question: thi ...

javascriptsingly-linked-list

Is there a way to execute a cheerp-wasm program without using the 'path' module for loading?

One interesting feature of Cheerp is its cheerp-wasm target, which compiles C++ into both a .js file and its corresponding .wasm file. Essentially, the .js file acts as a loader for the WebAssembly code. This particular loader ...

javascriptc++screepscheerp

Using Node to transpile, bundle, and minify JavaScript without relying on Gulp, Webpack, etc

Even though Webpack is a great tool for building JS, I am interested in learning how to do it manually. In the past, I used a gulp script for this task before transitioning to Webpack. However, there are so many small details to consider which can be frus ...

javascriptnode.jswebpackbabeljstranspiler

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

javascriptmysqlangularjsjsonhtml