title: Getting rest api data into bootstrap Vue table and pagination
body: <p>I am using the Itunes rest api to get data into my application, I am having problem getting the data into the table, the rest api structure is as follows:</p>
  
  <pre><code>{resultCount: 4, results: Array(4)}
  </code></pre>
  
  <p>So far I have tried the following:</p>
  
  <pre><code>&lt;div class="overflow-auto"&gt;
              &lt;b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                aria-controls="my-table"
              &gt;&lt;/b-pagination&gt;
  
              &lt;p class="mt-3"&gt;Current Page: {{ currentPage }}&lt;/p&gt;
  
              &lt;b-table
                id="my-table"
                v-for="(result, index) in result"
                :key="index"
                :fields="fields"
                :per-page="perPage"
                :current-page="currentPage"
                small
              &gt;&lt;/b-table&gt;
            &lt;/div&gt;
  
  &lt;script&gt;
  import List from "../components/myList.vue";
  
  export default {
    name: "Hero",
    components: {
      List
    },
    data: function() {
      return {
        fields: [
          {
            key: "artistName",
            label: "Artist"
          },
          {
            key: "collectionName",
            label: "Song title"
          }
        ],
        title: "Simple Search",
        isActive: true,
        intro: "This is a simple hero unit, a simple jumbotron-style.",
        subintro:
          "It uses utility classes for typography and spacing to space content out.",
        result: [],
        errors: [],
        List: [],
        search: "",
        loading: "",
        message: false,
        isValidationAllowed: false,
        loadingClass: "loading",
        errorTextClass: "error-text",
        disableButton: false,
        perPage: 3,
        currentPage: 1
      };
    },
  
    watch: {
      search: function(val) {
        if (!val) {
          this.result = [];
        }
      }
    },
  
    computed: {
      validated() {
        return this.isValidationAllowed &amp;&amp; !this.search;
      },
      isDisabled: function() {
        return !this.terms;
      },
      rows() {
        return this.result.length;
      }
    },
  
    methods: {
      getData: function() {
        this.isValidationAllowed = true;
        this.loading = true;
        fetch(`https://itunes.apple.com/search?term=${this.search}&amp;entity=album`)
          .then(response =&gt; response.json())
          .then(data =&gt; {
            this.result = data.results;
            this.loading = false;
            /* eslint-disable no-console */
            console.log(data);
            /* eslint-disable no-console */
          });
      },
  
      toggleClass: function() {
        // Check value
        if (this.isActive) {
          this.isActive = false;
        } else {
          this.isActive = true;
        }
      },
  
      refreshPage: function() {
        this.search = "";
      },
      addItem: function(result) {
        result.disableButton = true; // Or result['disableButton'] = true;
        this.List.push(result);
        /* eslint-disable no-console */
        console.log(result);
        /* eslint-disable no-console */
      },
  
      resizeArtworkUrl(result) {
        return result.artworkUrl100.replace("100x100", "160x160");
      }
    },
    mounted() {
      if (localStorage.getItem("List")) {
        try {
          this.List = JSON.parse(localStorage.getItem("List"));
        } catch (err) {
          console.err(err);
        }
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I get just [Object Object] when looking into the rendered page, so either I am not targeting the correct element, or it is not coming in right: the following code works outside of the bootstrap vue pagination and table.</p>
  
  <pre><code>&lt;div v-for="(result, index) in result" :key="index"&gt;
              &lt;div class="media mb-4"&gt;
                &lt;img
                  :src="resizeArtworkUrl(result)"
                  alt="Album Cover"
                  class="album-cover align-self-start mr-3"
                &gt;
                &lt;div class="media-body"&gt;
                  &lt;h4 class="mt-0"&gt;
  
                    &lt;button
                      type="button"
                      class="btn btn-primary btn-lg mb-3 float-right"
                      v-on:click="addItem(result)"
                      :disabled="result.disableButton"
                    &gt;
                      &lt;font-awesome-icon icon="plus"/&gt;
                    &lt;/button&gt;
  
                    &lt;b&gt;{{result.collectionName}}&lt;/b&gt;
                  &lt;/h4&gt;
                  &lt;h6 class="mt-0"&gt;{{result.artistName}}&lt;/h6&gt;
                  &lt;p class="mt-0"&gt;{{result.primaryGenreName}}&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be good.</p>