vuejs vue-router Cannot read property 'push' of undefined - laravel-5

Hi guys I am using vuejs and laravel to redirect url, unfortunately I keep on getting the error 'Cannot read property 'push' of undefined'.
Here is the code:
edit(animal){
this.$route.router.push({path: '/api/animals/' + animal.id + '/edit'})
},

Thanks guys.
This way solved the issue.
edit(animal){
this.$router.push({path: '/api/animals/' + animal.id + '/edit'})
},

Related

Laravel + Inertia + Vue.js Duplicates App_URL into url

I have been working on a Laravel 8 Inertia and Vue.js project for a couple of weeks without this problem.
My files were residing in C:\Users[my_user]\laravel. I was using the artisan command serve where it was opening 127.0.0.1:8080 as the local development server -- everything was fine.
I decided that it was time to transfer the files to apache's http://localhost/laravel where I would use xampp to open the project instead of Laravel php artisan command serve.
I have inspected my routes, Controllers, passed the Inertia::render() command, reached app.js without any problem. but when I run the createInertiaApp() I get url part being duplicated I guess by Inertia and not vue.js
Here is the code I am having in my app.js
console.log('Still working well without duplicating url')
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('Link', Link)
.component('Head', Head)
.mixin({ methods: { route } })
.mount(el);
},
});
NB: when I comment the createInertiaApp code, the home url will be perfectly http://localhost/laravel, but when I run the createInertiaApp I get http://localhost/laravel/laravel/
I'm facing the same problem. I'm using Nginx, Laravel Jetstream with Inertia stack and I'm working on a local environment. What I get when I request a url e.g. 192.168.1.204:5500/helpdesk/public/login is 192.168.1.204:5500/helpdesk/public/helpdesk/public/login. Urls appear normal when I use php artisan serve. What I have noticed is that the issue lies on /vendor/inertiajs/inertia-laravel/src/Response.php toResponse() method and in particular in the following piece of code:
$page = [
'component' => $this->component,
'props' => $props,
//'url' => $request->getBaseUrl().$request->getRequestUri(),
'url' => $request->getRequestUri(),
'version' => $this->version,
];
If you replace $request->getBaseUrl().$request->getRequestUri() with $request->getRequestUri() the problem should go away.
But I think there must be a much better/cleaner way to do that. I hope someone else can provide more help on that.
Actually the above code was changed when support to Laravel 9 was added to inertia/laravel: https://github.com/inertiajs/inertia-laravel/pull/347/commits/bf059248ab73bcaccbea057d0a9fa11446fa0e20.
There is also an issue opened for this: https://github.com/inertiajs/inertia-laravel/pull/360.

How to fix ReferenceError not defined when passing props from Laravel blade to Vue component

I'm trying to use a Vue.js component in Laravel but cannot get props passed from the blade to the js component. Console is reporting [Vue warn]: Error in mounted hook: "ReferenceError: clientId is not defined"
I've tried renaming the prop in the blade/js, using :client-id, client, v-client, etc., and simplified as much as I can but still can't make it work.
Looks almost exactly like a bit of code I've used successfully elsewhere.
show.blade.php
<archive-button client-id="1"></archive-button>
archiveButton.js
<script>
export default {
props: ["clientId"],
mounted() {
console.log("id:" + clientId);
}
};
</script>
I expect the clientId to appear in the console as id:1 but instead, it reports
[Vue warn]: Error in mounted hook: "ReferenceError: clientId is not defined"
found in
---> <ArchiveButton> at resources/js/components/archiveButton.vue
Probably a schoolboy error, but I've been staring at it and scratching my head for ages... Can anyone see the problem?
This has nothing to do with Laravel
Change
mounted() {
console.log("id:" + clientId);
}
to
mounted() {
console.log("id:" + this.clientId);
}

VueJS: how to get route url?

I am working in laravel with Vue, and I can't get route url.
For example there is route localhost:8000/chat/3 and I need to get 3 in route
I tried in app.js to write in
data: {
userId: this.$route.params
}
and then in
created() {
console.log(this.userId);
}
So i can send ajax request to that route. But it returns TypeError: this.$route is undefined. I tried also with other things than params but it allways show this error

POST from Ruby to Meteor with Iron Router?

I've been trying to get a message from a Ruby script to a webapp built with MeteorJS using POST, but I've been facing some issues. There isn't much documentation online about POST and GET method management with Iron Router.
My Ruby script:
meteorUri = URI('http://localhost:3000/newReport');
res = Net::HTTP.post_form(meteorUri, 'message' => 'HelloFromRuby', 'max' => '50')
puts "From Meteor:\t#{res}"
I don't have much experience with Ruby. The above code I got mostly online.
The routing with Iron Router:
Router.route('/newReport/:message', {where: 'server'})
.post( function(message){
Meteor.call('reportInsert', {message: message}, function(error, recordId){
if (error){
alert(error.reason);
} else {
console.log("Inserted " + recordId);
}
});
});
I am trying to make Ruby make a post to http://localhost:3000/newReportwith a message that is supposed to be a string.
The function reportInsert works, I tested it. The issue seems to be in either making the POST, or receiving it.
Thank you!
Beside using an alert in a server side route, I don't see any issues on Meteor's side. Might want to change it to console.log to see what error are you getting.

Ajax delete request not working on remote website

Using php with the laravel framework. I have a delete request to delete a file entry on my website, it's working fine locally but on my webserver it's failing.
// Ajax call
$.ajax({
url: BASE+'/contests/any/entries/any',
type: 'DELETE',
data: {
entry_id : entry_id
},
success: function() {
$(".entry-item#"+entry_id).remove();
}
});
My route:
Route::delete('contests/(:any)/entries/(:any)', 'entry#destroy');
Controller method:
public function delete_destroy() {
$entry = Entry::find(Input::get('entry_id'));
Entry::find($entry->id)->delete();
File::delete(URL::base() . 'public/uploads/' . $entry->filename);
}
When I check ajax requests viewing the network tab in chrome developer tools I get a status 404 not found on this delete method while it's working fine locally in wamp. Can anyone tell me what is wrong here and what this 404 not found exactly means?
What exactly isn't found here?
Actually, 404 not found means that your file doesn't exist and it could be also because of a wrong path and I think it could be because you are using
File::delete(URL::base() . 'public/uploads/' . $entry->filename);
which returns most probably something like
http://yourdomainpublic/uploads/filename
Instead, you can use
File::delete(path('public').'uploads/' . $entry->filename);
Which will output something like this
http://yourdomain/public/uploads/filename

Resources