javascript - Vue.js 的引导表/分页中的数据问题
问题描述
我的表格目前不显示我从休息 api(iTunes)返回的数据,它也不会分页。在控制台中我得到:
<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],[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>
我的组件代码是:
<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)"
>
<font-awesome-icon icon="plus"/>
</button>-->
<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>
任何帮助都会很好,因为我不明白这可能发生在哪里我是 Vue 的新手,我认为我在表中调用了错误的变量或类似的东西..
解决方案
更改result="..."
为:result="..."
。您需要绑定值(:
是 hte 的快捷方式v-bind:
)。
推荐阅读
- javascript - 基本算法脚本:返回数组中的最大数 (JavaScript)
- amazon-web-services - 无论如何,我们是否可以在 Amazon Connect 上获得来电报告以及电话号码?
- php - 如何从命令行运行 mvc 控制器操作
- sql - 使用 TD_WEEK_OF_CALENDAR 时出现 Teradata 3706 错误
- javascript - Liferay - React portlet:MIME 类型('text/html')不可执行,并且启用了严格的 MIME 类型检查
- c++ - C++ 读取包含空字符的流的行
- google-sheets - 计算 AVERAGE() 时忽略某些值
- android - 带有 Xampp 的 WebView
- ruby - Ruby:如何使用别名修改字符串的一部分
- laravel - Laravel 和 Vuejs。我可以发帖,但我无法获取数据