Hi Constantin, first off thanks for the video! I got a problem with the search. So, as soon as I type in the search field, the list gets filtered correctely. So far so good. The problem is when I delete what I wrote in the search. When I delete the letters I wrote, the list is not filtered anymore, it just shows the previous results but it doesn't get updated. Example: if the letters I write doesn't match with any title in the list, the list stays empty, even tough I delete the letters in the search field. IMPORTANT: when I write in the search field, I receive these two errors in the console: - TypeError: Cannot read property 'insertBefore' of null - TypeError: Cannot read property 'emitsOptions' of null I followed all your steps, what could be the problem? Thanks so much!
Hi Nicola, I'm glad you liked the video! Regarding your problem, I'm 99% it's because of vue. The project in the video has vue@3.0.10 installed. I've upgraded it to the latest version and I'm getting the exact same error you're getting. Soo.... temporary fix: downgrade vue and @vue/compiler-sfc to 3.0.10 ``` // package.json "@vue/compiler-sfc": "3.0.10", "vue": "3.0.10", ``` npm update && npm run dev/watch
@@cdruc thank you so much! It's a relief that I'm not the only one to have this problem. But wait, I have "3.0.5" version for both vue and the compiler. Which version should I downgrade to?
Hmm.. Are you sure you're on the 3.0.5 version? You might have ^3.0.5 in package.json, but that instructs npm to install the latest version up to (but not included) 4.0.0. So if you have ^3.0.5 in your package.json and run the npm install, it will grab the latest available version that fits those constraints - which, at this moment, is 3.0.11 To check the exact version you are on, open the package-lock.json file and search for: node_modules/vue ---- To "force" npm to install a specific version, enter the exact version without any other sign in front (so no caret or tilde).
@@cdruc it's exactly as you're saying, I'm actually on 3.0.11 at the moment...Alright, then I will try to downgrade! But as you said, this is a temporary solution, what about a solution that works with any version? I mean, I don't understand why in the latest available version it doesn't work, giving me those stupid and incomprehensible errors...
Bro , even I did Almost the same way in my projects ( ofcourse after watching your previous videos ) .. now I got few more tips to improve my code especially validation .. as usual professional work 👍👍👍
What about adding a select with preset number of records to update the query (5, 10 15) ! That would complete this video :)! Thank you very much for this video!
Great Video, everything worked as expected! I have a problem regarding the filters prop, which I don't understand. As soon as I set the initial value of the params, I get the following error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filters'). I have the same code as you, and when I console log the filters-object I get the values just as expected... Do you know anything about this behaviour?
For your information, my issue was solved. The problem was, that I used an arrow function for data. Changing the arrow function to ES6 notation solved the issue. Thanks anyway and keep up the great work!
Thanks, I'm glad you found the video helpful! If you worry about showing the real DB columns, a solution would be to use an array to map the fields coming from the request to the actual columns of your database - similarly to a dictionary. Eg: $columns = [ 'randomNameThatIsntTheActualColumnName' => 'name', 'randomCity' => 'city', 'randomPostcode' => 'postcode', ]; if (request()->has(['field', 'direction'])) { $query->orderBy($columns[request('field')], request('direction')); } So the key `randomCity` can be anything you want. But then you match that with an actual column name only your Controller knows.
hello :) I am using laravel, inertia vue3 and inertia is using at 1:51 you are typing; watch : { params:{ handler(){ this.$inertia.get(this.route('route'), this.params, {replace: true, preserveState:true })} } } for now $inertia does not supported. It is replaced with Inertia im am doing watch(() => dt_props.search, () => { this.Inertia.get(this.route('routeName'), dt_props.search, {replace:true, preserveState:true}); }) but i get no result with no error. what should do with my syntax?
Hi Constantin, first off thanks for the video!
I got a problem with the search. So, as soon as I type in the search field, the list gets filtered correctely. So far so good.
The problem is when I delete what I wrote in the search. When I delete the letters I wrote, the list is not filtered anymore, it just shows the previous results but it doesn't get updated.
Example: if the letters I write doesn't match with any title in the list, the list stays empty, even tough I delete the letters in the search field.
IMPORTANT: when I write in the search field, I receive these two errors in the console:
- TypeError: Cannot read property 'insertBefore' of null
- TypeError: Cannot read property 'emitsOptions' of null
I followed all your steps, what could be the problem? Thanks so much!
Hi Nicola,
I'm glad you liked the video!
Regarding your problem, I'm 99% it's because of vue.
The project in the video has vue@3.0.10 installed.
I've upgraded it to the latest version and I'm getting the exact same error you're getting.
Soo.... temporary fix: downgrade vue and @vue/compiler-sfc to 3.0.10
```
// package.json
"@vue/compiler-sfc": "3.0.10",
"vue": "3.0.10",
```
npm update && npm run dev/watch
@@cdruc thank you so much! It's a relief that I'm not the only one to have this problem. But wait, I have "3.0.5" version for both vue and the compiler. Which version should I downgrade to?
Hmm..
Are you sure you're on the 3.0.5 version?
You might have ^3.0.5 in package.json, but that instructs npm to install the latest version up to (but not included) 4.0.0.
So if you have ^3.0.5 in your package.json and run the npm install, it will grab the latest available version that fits those constraints - which, at this moment, is 3.0.11
To check the exact version you are on, open the package-lock.json file and search for: node_modules/vue
----
To "force" npm to install a specific version, enter the exact version without any other sign in front (so no caret or tilde).
@@cdruc it's exactly as you're saying, I'm actually on 3.0.11 at the moment...Alright, then I will try to downgrade!
But as you said, this is a temporary solution, what about a solution that works with any version?
I mean, I don't understand why in the latest available version it doesn't work, giving me those stupid and incomprehensible errors...
@@nicxla.s
friend, did you manage to solve I have the same error?
i always find the solution i want in your channel whenever i encounter a problem.. great content sir, thank you!
Bro , even I did Almost the same way in my projects ( ofcourse after watching your previous videos ) .. now I got few more tips to improve my code especially validation .. as usual professional work 👍👍👍
It's worth to mention that we should add ->withQueryString() to the controller action so the paging works with the query params. Good video!
Great hint! May I ask where do you exactly add it to? Thanks in advance!
Very well explained, simple and concrete. Thanks!
Love your elaboration. Respect from Pakistan
this video save me sooo much time!!! thank you so much. Trying to learn to convert this to setup script
glad you found it helpful!
looks really good, loved the video
Glad you liked it!
Really a good one.. Convinces me to try inertia
Another great video 😊👏
Thank you 🤗
Thank for InertiaJS video : Ashok Kumar - INDIA
Thanks a lot, works like charms
What about adding a select with preset number of records to update the query (5, 10 15) ! That would complete this video :)! Thank you very much for this video!
Excellent work
Great Video, everything worked as expected! I have a problem regarding the filters prop, which I don't understand. As soon as I set the initial value of the params, I get the following error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filters'). I have the same code as you, and when I console log the filters-object I get the values just as expected... Do you know anything about this behaviour?
For your information, my issue was solved. The problem was, that I used an arrow function for data. Changing the arrow function to ES6 notation solved the issue. Thanks anyway and keep up the great work!
Any idea how we can preserve the pagination param when we sort the list?
Thanks for the video very helpful!
Great work bro.
Great explanation, can you please guide us, how can we protect/hide real table column names. If I don't want to public my schema in the query string.
Thanks, I'm glad you found the video helpful!
If you worry about showing the real DB columns, a solution would be to use an array to map the fields coming from the request to the actual columns of your database - similarly to a dictionary.
Eg:
$columns = [
'randomNameThatIsntTheActualColumnName' => 'name',
'randomCity' => 'city',
'randomPostcode' => 'postcode',
];
if (request()->has(['field', 'direction'])) {
$query->orderBy($columns[request('field')], request('direction'));
}
So the key `randomCity` can be anything you want. But then you match that with an actual column name only your Controller knows.
good one
thank you
could yo please...please...PLEASEEEEEEEEE
record a new video about this, but using COMPOSITION API ?
Another great tutorial! Thank you very much
Glad you liked it!
Instead using get request, can we use post request to processing the search ? I rather like url stay clean from search keyword while searching.
how would you handle this in composition api vue 3?
pretty much the same. apart from using the new composition functions 🤷♂️ - maybe I'll recreate the video using vue3 sometimes in the future
terima kasih
hi constantin thank you for this video but i face two error
app.js:18932 Uncaught ReferenceError: throttle is not defined
and for pickBy tooo
Hey, make sure you import them from lodash (I'm importing it at 10:08). Laravel comes with lodash by default, so you should already have it installed.
Thank bro
with react bro
have you found in react?
@@zoyashakeel240 yes
@@yandinov can you share with me?
hello :)
I am using laravel, inertia vue3 and inertia is using at 1:51 you are typing;
watch : {
params:{
handler(){ this.$inertia.get(this.route('route'), this.params, {replace: true, preserveState:true })}
}
}
for now $inertia does not supported. It is replaced with Inertia
im am doing
watch(() => dt_props.search, () => {
this.Inertia.get(this.route('routeName'), dt_props.search, {replace:true, preserveState:true});
})
but i get no result with no error.
what should do with my syntax?
this is not available with composition api,
filters[name]=john how to transform this using inertia.get() ?