我使用 Vue 資料表 (v-data-table) 實作了服務器端搜索和分頁。當我開始在搜索欄中輸入時，起初只有一個“n”，它回傳 55 頁，這是正確的，我可以使用下一個/上一個按鈕在頁面中移動。但是當搜索是“ni”并且只回傳 25 個專案（它正確計算這應該是 3 頁）時，我的下一個按鈕被禁用......見下文。有沒有人知道這哪里出錯了。我還附上了以資料表模板開頭的代碼...
<v-data-table
:headers="headers"
:items="all_items"
:search="search"
height="300px"
:server-items-length="totalPages"
fixed-header
:items-per-page="10"
:page="page"
:options.sync="options"
@update:options="onOptionsChanged"
></v-data-table>
</v-card>
</v-container>
</template>
<script>
import axios from "axios";
export default {
name: "datatable",
mounted() {
axios.get('http://localhost:8080/api/fields?model_id=1').then(response => this.headers = response.data.results)
axios.get('http://localhost:8080/api/freemodelitems?model_id=1').then(response => {
this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
this.page = this.options.page
for (let i = 0; i < response.data.results.length; i ) {
this.all_items.push(response.data.results[i].data)
}
})
},
watch: {
search: function (val) {
this.search = val
this.onOptionsChanged(this.options, true)
return val
}
},
methods: {
onOptionsChanged(options, page0=false) {
console.log(page0)
axios.get('http://localhost:8080/api/freemodelitems?model_id=1'
'&page='
(!page0 ? this.options.page : 1)
'&search='
this.search).then(response => {
this.page = !page0 ? this.options.page : 1
this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
console.log(this.totalPages)
console.log(this.page)
this.all_items = [];
for (let i = 0; i < response.data.results.length; i ) {
this.all_items.push(response.data.results[i].data)
}
})
},
},
data() {
return {
search: "",
options: {},
headers: [],
all_items: [],
pageSize: 10,
totalPages: 0,
page: 1,
}
},
}
</script>
uj5u.com熱心網友回復：
問題是:server-items-length="totalPages"。您正在使用總頁數設定屬性，但您需要使用總頁數設定它或將其全部洗掉，因為組件可以自己計算頁數。
參考自 prop 的檔案server-items-length：
僅當資料由服務器提供時使用。應設定為服務器上可用專案的總數，以便分頁正常作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406887.html
標籤：
下一篇：使資料和方法在Vuejs中可重用