‹B-list-group-item› в приложении vue.js с интерфейсом командной строки без отображения bootstrap-vue

У меня есть приложение, созданное с помощью 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-код, но между тегами нет данных. Элемент-инспектор (хром) показывает ...

введите описание изображения здесь

В чем проблема? Есть у кого-нибудь идея? Пожалуйста помоги.

Это мой 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>

javascript vue.js axios bootstrap-vue
person Ralf Bordé    schedule 22.11.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это потому, что 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;
  });

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>
person Hiws    schedule 22.11.2019
comment
@HiwsTHX много! Вот в чем проблема. С правильным JSON-массивом (100 элементов) приложение работает нормально! - person Ralf Bordé; 22.11.2019