I'm using nuxtjs for my project fronted.. after I completed some of my development and I,m try to host that with shared hosting so I run the 'npm run generate command. But some pages it get this error.
This is my Bank page Code
<template>
<v-layout style="display:block">
<h2>Banks Details</h2>
<v-row>
<v-col cols="12" sm="9">
<v-data-table
:headers="tableHedaer"
:items="list.data"
@update:page="nxtPage"
:loading="loading"
dense
height="calc(100vh - 285px)"
disable-items-per-page
>
<template v-slot:item.action="{ item }">
<v-btn icon color="error">
<v-icon @click=";(selectID = item.id), (dialogSureR = true)"
>mdi-delete</v-icon
>
</v-btn>
</template>
</v-data-table>
</v-col>
<v-col cols="12" sm="3">
<v-card
style="border-radius: 0px; border:1px solid black;"
height="calc(100vh - 180px)"
flat
>
<v-card-text>
<v-col cols="12" sm="12">
Add new Bank
</v-col>
<v-divider />
<v-col cols="12" sm="12">
<v-text-field
v-model="form.bankCode"
outlined
label="Bank Code"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-select
v-model="form.accountType"
:items="types"
outlined
label="Account Type"
height="30"
hide-details
></v-select>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.bankName"
outlined
label="Bank Name"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.branch"
outlined
label="Branch"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model="form.accountNo"
outlined
label="Account Number"
hide-details
></v-text-field>
</v-col>
<v-col cols="12" sm="12" class="text-right">
<v-btn @click="addBank()" color="indigo" small dark depressed
>save</v-btn
>
</v-col>
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- remove dialog -->
<v-dialog v-model="dialogSureR" max-width="290">
<v-card>
<v-card-title class="headline">Are You Sure?</v-card-title>
<v-card-text> </v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn @click="dialogSureR = false" color="red" text>
No
</v-btn>
<v-btn @click="removeBank(selectID)" color="green darken-1" text>
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<snack :s-text="sText" :s-color="sColor" :snackbar="snackbarv"></snack>
</v-layout>
</template>
<script>
import snack from '~/components/Loaders/snackBar'
export default {
components: {
snack
},
data() {
return {
tableHedaer: [
{
text: 'ID',
align: 'left',
sortable: false,
value: 'id'
},
{
text: 'Bank Code',
align: 'left',
sortable: true,
value: 'bankCode'
},
{
text: 'Account Type',
align: 'left',
sortable: false,
value: 'accountType'
},
{
text: 'Bank Name',
align: 'left',
sortable: false,
value: 'bankName'
},
{
text: 'Branch',
align: 'left',
sortable: false,
value: 'branch'
},
{
text: 'Account Number',
align: 'left',
sortable: false,
value: 'accountNo'
},
{
text: 'Remove',
align: 'left',
sortable: false,
value: 'action'
}
],
types: ['saving', 'current'],
list: [],
loading: false,
sText: '',
sColor: '',
snackbarv: false,
dialogSureR: false,
selectID: '',
form: {
bankCode: '',
accountType: '',
bankName: '',
branch: '',
accountNo: ''
}
}
},
watch: {
// snackbar modal value false time
snackbarv() {
if (this.snackbarv === true) {
if (this.sColor === 'success') {
setTimeout(() => {
this.snackbarv = false
}, 2000)
} else if (this.sColor === 'warning') {
setTimeout(() => {
this.snackbarv = false
}, 5000)
} else {
setTimeout(() => {
this.snackbarv = false
}, 3000)
}
}
}
},
async asyncData({ $axios }) {
const empcget = await $axios.$get('/admin/allBanks')
return {
list: empcget
}
},
methods: {
// get all banks data
getAllE() {
this.loading = true
this.$axios.$get(`/admin/allBanks`).then((data) => {
this.loading = false
this.list = data
})
},
// data table next and prev click load paginate data
nxtPage(no) {
this.loading = true
this.$axios
.$get(`${this.list.path}?page=${no}`)
.then((data) => {
this.list = data
this.loading = false
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
})
},
// add new bank
addBank() {
if (
this.form.bankCode !== '' &&
this.form.accountType !== '' &&
this.form.bankName !== '' &&
this.form.branch !== '' &&
this.form.accountNo !== ''
) {
this.$axios
.$post(`/admin/saveNewBank`, this.form)
.then((data) => {
this.snackbarv = true
this.sText = 'Done'
this.sColor = 'success'
this.list.data.push(data.data)
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
})
} else {
this.snackbarv = true
this.sText = 'Please fill all fields'
this.sColor = 'warning'
}
},
removeBank(id) {
this.$axios
.$delete(`/admin/removeBank/${id}`)
.then((data) => {
this.snackbarv = true
this.sText = 'Done'
this.sColor = 'success'
this.nxtPage(this.list.current_page)
this.dialogSureR = false
})
.catch((error) => {
this.loading = false
console.log(error)
alert('error')
this.dialogSureR = false
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .v-data-footer__select {
visibility: hidden !important;
}
</style>
And if I remove below part and run the npm run generate command it works with no error
async asyncData({ $axios }) {
const empcget = await $axios.$get('/admin/allBanks')
return {
list: empcget
}
},
laravel controller function
/**
* return all bank details
*
* @return array all bank details
*/
public function getAll(){
$data = tblBank::paginate(50);
return new BankDetailsResource($data);
}
whats the wrong with this?
Thank You..
