BootstrapVue Таблица не отображает данные

Question

Я пытаюсь использовать найденную таблицу bootstrapVue здесь

Если я использую их пример, таблица отлично работает.

  <b-table striped hover :items="items"></b-table>

Однако, как только я использую

<b-table striped hover :fundingInstructions="fundingInstructions"></b-table>

Моя таблица не отображается, и когда я смотрю в инструменты разработчика, я вижу, что в моей таблице есть [объект, объект] для каждого объекта, который явернись из моего API. Если я записываю в журнал свои данные, я вижу массив [] с несколькими объектами.Как мне получить таблицу для отображения моих данных?

 const items = [
  { isActive: true,  date:'10/20/2018', amount:'$4568.00', city:'FL Palm Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$789.23', city:'FL Daytona Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$999.99', city:'FL Key West' },
  { isActive: true,  date:'10/22/2018', amount:'$589.00', city:'FL Deltona' }
]

 export default {
    data() {
      return {
        fundingInstructions : [],
         fields: [ 'subMerchantName', 'fundsTransferId', 'amount' ,'accType', 'submitDate' ],
        items: items
      }
      },
         methods:{
           async GetFundingInstructionInfo(){
             this.fundingInstructions = await api.getAllFundingInstructions()
}

Answer 1

Вы очень правы.Слово 'items' является свойством компонента b-таблицы и работает так же, как обычные свойства vue.Подробнее о свойствах здесь в официальной документации VUE.

Answer 2

Хорошо, я выяснил, в чем проблема и, следовательно, решение.В таблице html она должна выглядеть следующим образом:

  <b-table striped hover :items="fundingInstructions"></b-table>

Кажется, что элементы - это ключевой термин, а ваша коллекция входит в цитату.Вот и все!