My Vue-CLI app uses Bootstrap-vue and axios to fetch JSON data. The HTML code in my App.vue displays the data using UL and LI tags:
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="(value, key) in post" :key="key">
{{ key }} : {{ value }}
</li>
</ul>
Output: https://i.sstatic.net/NO4GJ.png
However, when I use code with bootstrap tags, the data is not displayed correctly:
<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>
Output: https://i.sstatic.net/hnHO7.png
The HTML code appears generated but there is no data between the tags. The Chrome element inspector shows...
https://i.sstatic.net/VXXM1.png
I'm looking for help to solve this issue. Here's 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 the script in my 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>