Lösung für das Problem, dass bei Verwendung der Laravel-Vue-Paginierung nicht zu einer anderen Seite gesprungen werden kann
P粉598140294
2023-08-28 16:12:34
<p>In einer Tabelle werden die Daten angezeigt, aber wenn ich auf die von Laravel Vue Pagination bereitgestellte Seitenzahl klicke, wird mir dieselbe Seitenzahl 1 angezeigt. Nun, das Hauptproblem besteht darin, dass die Seitenzahl nicht an die Funktion (Composable API) übergeben wird. </p>
<p><strong>Vorlagenformular</strong></p>
<pre class="brush:php;toolbar:false;"><table class="table table-striped table-bordered">
<thead>
<th>SN</th>
<th>Kontotyp</th>
<th>Name</th>
<th>Geschäftsname</th>
<th>Adresse</th>
<th>Kontaktnummer</th>
<th>E-Mail</th>
</thead>
<tbody>
<tr v-for="(account, i) in Accounts.data" :key="account.id">
<td>{{ ++i }}</td>
<td>{{ account.account_type }}</td>
<td>{{ account.name }}</td>
<td>{{ (account.shop_name)?account.shop_name: 'EMPTY'}}</td>
<td>{{ account.address }}</td>
<td>{{ account.contact_number }}</td>
<td>{{ account.email }}</td>
</tr>
</tbody>
</table>
<Pagination :data="accounts" @pagination-change-page="getAccounts"
</template></pre>
<p>Die Daten von der Composable-API werden in:data übergeben, und die Funktion (Composable) wird auch in @pagination-change-page übergeben.<strong>Skript-Tag</strong></p>
<pre class="brush:php;toolbar:false;">import LaravelVuePagination from 'laravel-vue-pagination';
Standard exportieren {
Komponenten: {
'Paginierung': LaravelVuePagination
},
aufstellen() {
}
const paginiert = ref(10);
const { Accounts, Loading, getAccounts } = accountDetails();//Composables API
onMounted(() => {
getAccounts({paginate:paginates});
});
return { Accounts, Loading, getAccounts };
},
};</pre>
</p><p>
<p><strong>Composable API</strong>
In dieser Funktion erhalte ich zwei Parameter, und hier sollte Pagination (@pagination-change-page) die Seitenzahl ausgeben! </p>
<pre class="brush:php;toolbar:false;">import { ref } from '@vue/reactivity';
Axios aus 'Axios' importieren;
const accountDetails = () =>
const Accounts = ref({});
const Loading = ref(true);
const accountError = ref({});
const getAccounts = async ({page=1,paginate}) =>
wait axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, {
Überschriften: {
Autorisierung: `Bearer ${localStorage.getItem('token')}`,
Akzeptieren: 'application/json',
}
}).then((res) => {
Accounts.value = res.data;
Loading.value = false;
console.log(accounts.value);
}).catch((resErr) => {
Loading.value = false;
accountError.value = resErr;
})
}
return { Accounts, Loading, AccountError, getAccounts }
}
Standardkontodetails exportieren;</pre></p>
成功使用Composition API Vue3进行工作
只需从getAccounts中删除paginate参数,并且不要将paginates传递给该函数。
更新的代码 </>
脚本
可组合的API