Vue.js not updating URL correctly - php

Question

Join.vue
<template>
<div class="container join-form">
<form>
<div class="container">
<h2>Join to session</h2>
</div>
<div class="form-group">
<label for="sessionId">Session ID:</label>
<input v-model="sessionId" class="form-control" type="text" name="sessionId" placeholder="Session ID">
</div>
<div class="form-group">
<label for="userName">Username:</label>
<input v-model="userName" class="form-control" type="text" name="userName" placeholder="Your name">
</div>
<button v-on:click.prevent="joinSession()" class="btn btn-primary">Join session</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
userName: "",
sessionId: this.$route.params.sessionId,
userId: null
};
},
methods: {
joinSession() {
this.$http
.post('/joinsession', {
userName: this.userName,
sessionId: this.sessionId
})
.then(
data => {
this.userId = data.body.userId;
this.$router.push("/user/" + this.sessionId + "/" + this.userId);
},
() => {
this.$router.push("/error");
}
);
}
}
};
</script>
<style>
.join-form {
width: 50%;
}
</style>
I wanna have "/user/{sessionId}/{userId}" but instead I've got
"http://projectx.laragon:8090/user/3/[object%20Object],[object%20Object]"
How can I solve this issue? I am using Laravel in combination with Vue-Resource &% Vue-Router in order to switch between different .vue files that are all together in an App.vue. This means my URL is not actively entered, it is just displayed without fetching from the server.
eg: "user/{userId}/{sessionId}" is a 404 if I didn't register it in my web.php

Answer 1

It seems you actually want do
this.$router.push( { path: '/user', params: { sessionId: this.sessionId, userId: this.userId } });
If it still not work, check your route configuration and sessionId / userId values.
For more info, see the docs