I have a route path that looks like this /courses/:id/modules/:id, I am passing the :id of the course and modules via params like this
<router-link
:to="{
name: 'course-modules',
params: { id: item.id, onlineClassId: item.online_class_id }
}"
class="forum__link">
{{ item.title }}
</router-link>
I need to use the IDs to make a GET request.
But when I refresh the page, the component loses hold of onlineClassId which throws an error. Is there a way I persist that ID?
Thanks.
I figured the issue, in router.js I was using /courses/:id/modules/:id instead of courses/:onlineClassId/modules/:id
Related
this is my json object ,i'm trying to access jackets in my url
{
"_id": "6316f215fd9c107baa1bc160"
"type": "Jackets",
}
this is my router component to get product by id
{
path: "/product/:id",
},
if i want to get my product information by id
<router-link :to="`/product/${product._id}`">
<div
class="bg-image hover-zoom ripple"
data-mdb-ripple-color="light"
>
<img
src="../../assets/pexels-baskin-creative-studios-1766838.jpg"
class="card-img-top"
/>
</div>
</router-link>
this is my url
http://localhost:8082/product/6316f215fd9c107baa1bc160
i get jackets in my template after clicking the router-link
{{product.type}}
how can i get add jackets in my url to something like this
http://localhost:8082/product/jackets
and still display the json details in my template component
As per my understanding, You want to slightly change the current route path without refreshing/reloading the page. If Yes, You can achieve that by using history.replaceState() API.
history.replaceState({}, '', this.$route.path + '/' + <your product name>)
I am using Nuxt for my vue project. I want to build a multi-tab application. But I could not manage the caching mechanism of nuxt.
The case is that, my full path never contains any parameters even in update paths.
I mean my paths are always like
/myapp/customer/update
instead of
/myapp/custmer/update/:id
So when I try to bind the nuxt key like
<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />
It does not caches anything and keeps loading all lifecyles (beforeCreate, created, beforeMount, mounted...)
If I do not use :key,
then keep-alive works perfect for pages without parameters
but works wrong with parameters. If I route to customer with id:3 once, then when I go to another customer with id:4, it still caches and displays the data of customer with id:3.
Here is my nuxt-link code:
<span
v-for="(tag, index) in tabbedViews"
:key="tag.name + (tag.params ? JSON.stringify(tag.params) : '')"
>
<nuxt-link
:key="tag.name + (tag.params ? JSON.stringify(tag.params) : '')"
:to="{ name: tag.name, params: tag.params }"
#click.native="tabClicked(index)"
>
{{ tag.name }}
<span
v-if="!tag.keepOpen"
class="el-icon-close"
#click.prevent.stop="closeSelectedTag(index)"
/>
</nuxt-link>
</span>
And below is the code that I use for viewing routes
<nuxt keep-alive :key="$route.path + ($route.params ? JSON.stringify($route.params) : '')" />
Any help will be pleasured.
Thank you...
Try to use :nuxt-child-key instead of :key.
https://nuxtjs.org/api/components-nuxt
I'm working on a project where I keep a log of key actions by users. For example a log entry is made when a user logs in to the application. I use a Laravel API as backend that takes care of the logging the event in the database and takes care of retrieving log entries to be displayed in the application. An example of a log entry returned for display is the following:
{{user|123|"John Doe"}} logged in at 2020-01-03 11:00:05
Now, I'd like Vue to automatically recognize that this should be replaced by the following:
<router-link to="/user/123">John Doe</router-link> logged in at 2020-01-03 11:00:05
So it automatically becomes a clickable link that navigates to the user profile in this case.
Does Vue offer any such functionality? Any ideas on how to approach this?
Thanks!
Yes, you can bind to to a computed property that will build the path string or data property (then you need to save the builded path in a data section when receving your response):
Template:
<router-link :to="path">{{userName}}</router-link>
script:
export default {
data() {
return {
path: '',
userName: ''
}
},
// OR
computed: {
path() {
<build your path from entry variable>
return <your builded path>
},
userName() {
<extract your user name>
return <extracted user name>
}
}
}
<div v-for="user in users" :key="user.id">
<router-link :to="user.path">{{user.name}}</router-link>
logged in at {{ user.loginTime }}
</div>
I think I will use a v-for to do this, I am wondering what data you got from your Ajax api ?
I have a page that uses dynamic routing.
I have a "jobs" page that lists all jobs. One you click one job, it gives you the detail of that one job.
Jobs HTML page uses the following (snippets excludes ul/li tags):
<vue-panel v-for="job in jobs" v-if="filterJob(job)" v-bind:key="job.id">
Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>
<router-link :to="`/job/${job.id}`">Learn More</router-link>
Clicking learn more leads to the correct job page. But how do I dynamically show just that specific job?
In the Job page, within the script I have:
created() {
console.log(this.$route.params.id); // prints value of :id
},
Via console log I see that it has access to the correct job page. But it is not dynamically showing that one job on the page. What needs to be in the HTML to access a specific job?
HTML of job page, as of now (excludes the ul/li tags):
<vue-panel v-bind:key="job.id">
Job: {{job.title}}<br>
Description: {{job.description}}<br>
Salary: ${{job.salary}}<br>
Date Posted: {{job.datePosted}}<br>
I built a similiar project and did the following.
router.js:
{
path: '/jobs/:id',
name: 'JobSingle',
component: JobSingle
}
jobs.vue
<router-link :to="{name:'JobSingle', params:{id:job._id}}">
{{ job.title }}
</router-link>
For more question you can have a look at my project here: github.com/markusdanek/t2w-vue
If you want to access by HTML you have to not bind key.
mounted(){
document.getElementById("H1").setAttribute("key", this.$route.params.id);
console.log('alex : ',document.getElementById("H1"));
}
When you use it by vue, you can't do by v-bind as type:
This works:
<div :type="$route.params.id">Verticals Statistics</div>
This don't work:
<div :key="$route.params.id">Verticals Statistics</div>
So you'll have to trick for passing a :key by vue, or as you did, with :
<div v-for='id in [$route.params.id]' :key="id">Verticals Statistics</div>
But it will not apear in HTML code.
You have to put an id on each and create the key attribute in the mounted part.
In my Vue app, I can click a link generated by <router-link>...</router-link> and visit a page like: /site/books/00666.html.
The routing config for this is:
{
path: '/books/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
So I changed the URI in the browser (Fx57) to: /site/books/00777.html to try to display the detail information of another book. It failed with this:
Cannot get /books/00777.html
and the debugger told me something like:
Content security policy is preventing from accessing a resource from 'self'`.
I searched on CSP but can't figure out how to make this working.
Update: To reproduce the issue, I use vue init webpack test and scafolded a blank Vue app with router support.
One new router is added:
{
path: '/book/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
In the default HelloWorld.vue, just add a few lines with <router-link>:
<ul>
<li><router-link :to="{name: 'BookDetail', params: {id: 12345} }">Book 1</router-link></li>
<li><router-link :to="{name: 'BookDetail', params: {id: 23456} }">Book 2</router-link></li>
</ul>
In the HelloWorld page, clicking the link above will take you to "localhost:8080/book/12345.html". Good.
Change the URI to "localhost:8080/book/23456.html". The browser prompts the same error as before.
Update 2： per hint below, I modified the URI pattern to '/books/:id' and it is working.
Further question: What shall I do if I want to add the .html suffix?