vue.js CLI应用程序中的<b-list-group-item>未呈现Bootstrap-vue

Question

我有一个使用vue-CLI制作的应用程序，包括bootstrap-vue。在我的 App.vue 中，我正在使用axios来获取一些示例JSON数据。通过带有html标签（UL，LI）的简单代码，可以显示数据：

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

这是输出：

使用代码，使用引导标记和相同的数据，该数据未显示在列表项中，似乎是一个损坏的呈现。

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

这是输出：

已生成html代码，但标记之间没有数据。元素检查器（chrome）显示...

出什么问题了？有人知道吗？请帮忙。

这是我的 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)
})

这是我在 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

那是因为api https://jsonplaceholder.typicode.com/posts/1返回一个对象而不是一个数组。 如果您改为调用https://jsonplaceholder.typicode.com/posts，则将检索对象的数组，并且代码应该可以工作。

但是，如果您要调用的API点是您想要的那一点，则意味着您正在迭代对象键。 您需要将API中的结果插入到数组中，或者删除v-for并直接使用post。

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;
  });

或

<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

在另一个任务中发布的JSON新问题