There
i Have An Error In Laravel 6 Routes in This Code:
Route::group(['prefix' => 'list', 'as' => 'list.'], function()
{
Route::resource('/', 'StaffsController'); // List
});
In Route List Give Me An Empty Parameter That I Can't Pass It Using :
{{ route('admin.users.staffs.list.edit', ['id' => $person->id]) }}
Route List
admin/users/staffs/list/{}/edit | admin.users.staffs.list.edit
Thank You
try this
{{ route('admin.users.staffs.list.edit', $person->id) }}
if not working check route name
Route::group([
'as' => 'admin.'
], function()
{
Route::group([
'as' => 'users.'
], function()
{
Route::group([
'as' => 'staff.'
], function()
{
Route::resource('list', 'StaffsController'); // List
});
});
});
There is no need for grouping resource route.
Btw you can always call this command php artisan route:list to see what's going on inside of the route.
Related
const myArray =[];
const nestedMenuitems = ref([
{
items:myArray
},
]);
onMounted(() => {
ApiService.getStores().then((data) => {
stores.value = data;
stores.value.map(function(value, _key) {
myArray.push({lable: value.shop});
});
});
});
i am trying show array data items:myArray this line
under the code working fine but mu custom data api to pass data its not working.what is the problem.
how to solve this?
const list= [
{
label: 'Tracker',
icon: 'pi pi-fw pi-compass'
},
{
label: 'Map',
icon: 'pi pi-fw pi-map-marker'
},
{
label: 'Manage',
icon: 'pi pi-fw pi-pencil'
}
];
const nestedMenuitems = ref([
{
items:list
},
]);
i am trying show array data items:myArray this line
under the code working fine but mu custom data api to pass data its not working.what is the problem.
how to solve this?
<Menubar :model="nestedMenuitems" optionValue="value">
</Menubar>
model="nestedMenuitems to get dropdown data
To trigger reactivity you need to replace the item inside nestedMenuItems.
What's not clear to me is why aren't you using a simpler data structure:
const state = reactive({ items: [] });
const { items } = toRefs(state);
onMounted(() => {
ApiService.getStores().then((data) => {
data.forEach((value) => {
state.items.push({ label: value.shop });
});
});
});
What do you need nestedMenuItems for? Do you have more than one nestedMenuItem?
You might want to show <Menubar />. Most likely, you don't need v-model in it, but v-bind. e.g:
<Menubar :items="items" optionValue="value" />
And another question would be: if you're storing the response in stores, why are you also storing it somewhere else (e.g: in nestedMenuItems, or items)? Why not consume it directly from stores?
For example:
const stores = ref([]);
const items = computed(() => stores.value.map(({ shop: label }) => ({ label })));
onMounted(() => {
ApiService.getStores().then((data) => {
stores.value = data;
});
});
<pre v-text="JSON.stringify({ stores, items }, null, 2)" />
It's bad practice to keep the same reactive data in two separate places, because you're always running the risk of them getting out of sync. If you're using the same source, any change will be reflected in every place where the data is consumed/displayed.
I have router file, which contains all my routes.
Here is an example on one route:
path: '/events/:step',
children: [
{
path: '',
name: 'event.step',
components: {
default: Event,
sidebar: EventSidebar
}
}
],
props: {
default: ({ params, query: { id } }) => ({ id, ...params })
},
components: {
header: () => import('NavBar'),
default: () => import('Event')
},
async beforeEnter(to, from, next) {
if (step === 'login') { // can't find step
// do something
}
next()
}
I need to get the step param from route and if it is login do something in beforeEnter function.
How can I get it?
To get params from route you need to use to.params or from.params, if you want to access path you can get it from to.path or from.path depends what you need.
More info on https://router.vuejs.org/api/#routelocationnormalized
You can register global before guards using router.beforeEach:
router.beforeEach((to, from, next) => {
if (['Login', 'Signup'].includes(to.name) && logged_in)
next({ name: 'Home' })
else next()
})
https://router.vuejs.org/guide/advanced/navigation-guards.html
I need call 3 times the same POST API call on mounted and get the response.
The response of api is stored on vuex.
If i do paragraph that works:
{{answer1}} // displayed 2
{{answer2}} // displayed 1
{{answer3}} // displayed 0
but my checkbox doesn't works on first launch but if i save my document and it re-render thats's works....:
<el-checkbox v-model="...." :disabled="answer1 > 0 ?'false':'true'" ></el-checkbox>
my mounted call api :
async mounted(){
await this.actionSetanswer1({
props1: '..',
props2: '..',
}).then(() => {
this.actionSetanswer2({
props1: '...',
props2: '...',
}).then(() => {
this.actionSetanswer3({
props1: '...',
props2: '...',
})
})
})
}
Thanks you very much in advance
NB : this.$forceUpdate() doesn't work too...
you can add a loading state:
// script
data() {
return {
isLoading: true
}
},
mounted() {
// ...
.then(() => {
this.actionSetanswer3({
props1: '...',
props2: '...',
}).then(() => {
this.isLoading = false
})
}
// template
<el-checkbox v-if="!isLoading" v-model="...." :disabled="answer1 > 0 ?'false':'true'" />
I develop a ecommerce website with Vue.js2,
for the single product page, I have a route like
{
path: '/product/:code',
name: 'product',
props:true,
component: Product
},
And in the component I have somthing like
props: {
code: {
type:String
}
},
data: ()=> {
return {
product:{}
}
},
beforeMount(){
axios
.get('http://127.0.0.1:8000/api/products/'+this.code)
.then((response) => {
this.plan = response.data,
this.ListImages = response.data.ListImages;
console.log(this.ListImages)
console.log(this.plan)
})
}
The data is retrieved but the component is already create but if I do the request "beforeCreate()" the "this.code" is "undefined" and when I use "$router.params.code" an error is occured stating that "$router" is not the define.
Please can I have some help?
You should be able to use it like this:
this.$route.params.code
In the component, You can use this:
User {{ $route.params.getUserName }}
Route.js
{
path: "/#:getUserName",
name: "profile",
component: () => import("../views/ProfileView.vue"),
}
I have an AddComment.vue component which has a form, on submit it hits a laravel api endpoint where validation happens. If validation fails I want to show the errors in AddComment.vue. How can return the error.response object to AddComment.vue? Currently, I can see 'fired' in the console when I want to be logging the error. Where am I going wrong any help would be greatly appreciated
AddComponent.vue
methods: {
addComment() {
this.$store.dispatch('addComment', {
name: this.name,
email: this.email,
body: this.body
})
.then(response => {
this.$router.push({ name: 'home' })
console.log('fired')
})
.catch(error => {
console.log(error)
})
},
}
store.js
actions: {
addComment(context, comment) {
new Promise((resolve, reject) => {
axios.post('/comments', {
name: comment.name,
email: comment.email,
body: comment.body,
approved: false
})
.then(response => {
context.commit('addComment', response.data)
resolve(response)
})
.catch(error => {
reject(error)
})
});
},
}
The catch() block only gets called if the Laravel backend throws an error. So if you are returning a normal status code of 2xx then axios always calls the .then() part. In that case, you have to resolve the error message yourself.
Try something like this in your backend route (it will return an error):
return response()->toJson([
'message' => 'error message',
], 500);
And see if this responds with an actual error in you vuejs application.