Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error:
<table result="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" id="my-table" aria-busy="false" aria-colcount="2" class="table b-table table-sm"><!----><!----><thead role="rowgroup" class=""><!----><tr role="row"><th role="columnheader" scope="col" aria-colindex="1" class="">Artist</th><th role="columnheader" scope="col" aria-colindex="2" class="">Song title</th></tr></thead><!----><tbody role="rowgroup" class=""><!----><!----><!----></tbody></table>
The code in my component looks like this:
<template>
<div class="container search">
<div class="row">
<div class="col-md-8">
<div class="jumbotron mt-5" style="clear:both">
<h1 class="display-4">{{title}}</h1>
<p class="lead">{{intro}}</p>
<hr class="my-4">
<p v-if="validated" :class="errorTextClass">Enter a valid search term</p>
<button
type="button"
class="btn btn-primary btn-lg mb-3"
v-on:click="refreshPage"
v-if="result.length > 1"
>
<font-awesome-icon icon="redo"/> Start again
</button>
(<input
class="form-control form-control-lg mb-3"
type="search"
placeholder="Search"
aria-label="Search"
v-model="search"
required
autocomplete="off"
id="search"
>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:result="result"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
<div v-for="(result, index) in result" :key="index"
>
<div class="media mb-4">
<img
:src="resizeArtworkUrl(result)"
alt="Album Cover"
class="album-cover align-self-start mr-3"
>
<div class="media-body">
<h4 class="mt-0">
<button
type="button"
class="btn btn-primary btn-lg mb-3 float-right"
v-on:click="addItem(result)"
:disabled="result.disableButton"
>
<font-awesome-icon icon="plus"/>
</button>
<b>{{result.collectionName}}</b>
</h4>
<h6 class="mt-0">{{result.artistName}}</h6>
<p class="mt-0">{{result.primaryGenreName}}</p>
</div>
</div>
</div>
<div :class="loadingClass" v-if="loading"></div>
<button
class="btn btn-success btn-lg btn-block mb-3"
type="submit"
v-on:click="getData"
v-if="result.length < 1"
>
<font-awesome-icon icon="search"/> Search
</button>
</div>
</div>
<div class="col-md-4">
<List :itemList="List"/>
</div>
</div>
<!-- <div class='div' v-bind:class="[isActive ? 'red' : 'blue']" @click="toggleClass()"></div> -->
</div>
</template>
<script>
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 && !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}&entity=album`)
.then(response => response.json())
.then(data => {
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);
}
}
},
};
</script>
<style>
.loading {
background-image: url("../assets/Rolling-1s-42px.gif");
background-repeat: no-repeat;
height: 50px;
width: 50px;
margin: 15px;
margin-left: auto;
margin-right: auto;
}
.error-text {
color: red;
}
.media {
text-align: left;
}
.album-cover {
width: 80px;
height: auto;
}
.red {
background: red;
}
.blue {
background: blue;
}
.div {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid black;
}
</style>
If anyone has any insights or guidance on what could be causing this issue, I would greatly appreciate it as I am new to Vue. It seems like there might be an error in how I'm referencing variables within the table or some similar mistake.