<b-list-group-item> in vue.js CLI app with bootstrap-vue not rendered

Question

i have a app made with vue-CLI including bootstrap-vue. In my App.vue i'am using axios to fetch some sample JSON-data. With this simple code with html-tags (UL, LI), data are displayed:

 <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="(value, key) in post" :key="key">
        {{ key }} : {{ value }}
      </li>
    </ul>

This is the output:

With code, using bootstrap-tags and the same data, the data is not been displayed in list-items, seems to be a broken rendering.

   <b-list-group >
      <b-list-group-item
        href="#"
        class="flex-column align-items-start"
        v-for="result in post"
        v-bind:key="result.userId"
      >
        <div class="d-flex w-100 justify-content-between">
          <h6 class="mb-1">{{ result.title }}</h6>
          <small>{{ result.id }}</small>
        </div>

        <p class="mb-1">{{ result.body }}</p>

      </b-list-group-item>
    </b-list-group> 

This is the output:

The html-code is generated but no data between the tags. The element-Inspector (chrome) shows...

What's the problem? Has anybody an idea? Please help.

This is my main.js :

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import JQuery from 'jquery'
let $ = JQuery

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.use(VueRouter);

Vue.prototype.$log = console.log;

new Vue({
  el: '#app',
  render: h => h(App)
})

This is my script in Vue.app :

<script>
const productAPI =
  "http://www.m.myapp2go.de/services/getnewsliste.php?typ=news&id=10024";

import axios from "axios";
import Counter from "./Counter";

export default {
  name: "app",
  data() {
    return {
      msg: "Vue.js Template Test App",
      loading: false,
      post: null,
      results: null,
      error: ""
    };
  },
  components: {
    "my-counter": Counter
  },
  created: function() {
    this.loading = true;
    axios
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .then(res => {
        this.loading = false;
        this.post = res.data;
      })
      .catch(err => {
        this.loading = false;
        this.error = err;
      });
  },
  methods: {
    log(message) {
      console.log(message);
    }
  }
};
</script>

Answer 1

That's because the api https://jsonplaceholder.typicode.com/posts/1 returns an object and not an array. If you instead call https://jsonplaceholder.typicode.com/posts you will retrieve an array of objects and your code should work.

However, if the API point you're calling is the one you want that means you're iterating the object keys. You need to insert the result from the API into an array or remove the v-for and use the post directly.

axios
  .get("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => {
    this.loading = false;
    this.post = [res.data];
  })
  .catch(err => {
    this.loading = false;
    this.error = err;
  });

or

<b-list-group >
  <b-list-group-item
     href="#"
     class="flex-column align-items-start"
   >
     <div class="d-flex w-100 justify-content-between">
       <h6 class="mb-1">{{ post.title }}</h6>
       <small>{{ post.id }}</small>
     </div>
   <p class="mb-1">{{ post.body }}</p>
 </b-list-group-item>
</b-list-group> 

Answer 2

new Problem with JSON posted in an other task