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
Related
In Laravel's bootcamp (blade), there are two different syntaxes used for calling route() in a blade view component:
<x-dropdown-link :href="route('chirps.edit', $chirp)">
{{ __('Edit') }}
</x-dropdown-link>
<form method="POST" action="{{ route('chirps.destroy', $chirp) }}">
#csrf
#method('delete')
<x-dropdown-link :href="route('chirps.destroy', $chirp)" onclick="event.preventDefault(); this.closest('form').submit();">
{{ __('Delete') }}
</x-dropdown-link>
My understanding from documentation is that {{ }} is just a shortcut for <?= ?>
and by adding a : to html attribute laravel renders those attributes in the template.
So I started testing variations to see what works and doesn't work. This is what I got:
:href="{{ route(...) }}" doesn't work
href="{{ route(...) }}" works
:action="route(...)" doesn't work
action="{{ route(...)}}" does work
So my understanding makes sense for 1, 2, and 4, but not 3:
What is going on here? Does laravel not have an :action attribute for forms for some reason? or is it due to POSTing rather than GETting? Or is my understanding of laravel's syntax flawed?
It seems putting the : before a laravel/blade component attribute is the way to pass a variable of that name/value into that component class' constructor (passing-data-to-components).
So :href sets __constructor($href) to the string {{route(...)}} in the <x-dropdown-links> class, which laravel/blade constructs when the component is called. Which explains why <form :action...> wouldn't work.
There is an <x-form> component in the extra blade-ui library, but interestingly even there it seems that the action attribute is set with action="" not :action="". So guessing there is an issue related to POSTing after all.
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>)
Instead of showing data from a component, I'm currently routing a user to login at /account if they are not authorized, by doing this:
<template>
<q-card v-if="authorized">
<q-card-section>
<DataGrid/>
</q-card-section>
</q-card>
<span v-else>
{{ this.$router.push('/account') }}
</span>
</template>
It's simple and works, but I'm not sure its really correct because although it pushes the user to where I want them to be, the console gets this error:
uncaught exception: undefined
(I'm currently on Quasar v1.9.14)
Basically I want to show the data if the user is authorized or redirect if they are not authorized, or become unauthorized later.
first of all, you do not need to use this in the template.
If you want to route them based on the authorized value, you could probably use a watcher.
Alternatively, I would probably do something in mounted which checks if the user can be there. E.g.
async mounted ()
{
const authorized = await fetch("something")
if (!authorized)
{
this.$router.push('/account')
}
}
Its simpler than I thought. I believe the answer is events. The span can simply change to:
<span v-else #load="$router.push('/account')"/>
<span v-else :class="authorized ? '' : $router.push('/account')"/>
Its even simpler because its a one liner
It will work even after mounted() has already fired and authorized becomes false
Actually, I now can delete similar logic in mounted() (DRY principle)
EDITS:
After proper testing I found it actually does not work with my first #load event example.
I am building a web app using vue. I am trying to load images of a strapi cms that I am running and include them via an v-for loop in my component.
When setting the :src for an image, vue always includes the local server that my vue app is running on at the beginning. How do I get around that, so that I can reach the CMS on another port?
I tried different methods of binding the source, including "v-bind:src", ":src", ":src="require()""
<div class="images">
<template v-for="(Image, index) in Images">
<p v-bind:key="index">{{Image.Image_URL}}</p>
<img v-bind:key="index" :src="Image.Image_URL" :v-bind:alt="Image.Titel">
</template>
</div>
Output of one of the json objects.
Date: "24.04.2019",
Place: "Beijing, China",
Id: 2,
Image_URL: "http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg",
Title: "Lights"
I get the image url in a json object. The final url, which is represented here as "Image.Image_URL" is something like: "localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg". Until now the image src is always get "http://localhost:8080/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg" in Vue.
Thanks guys
You are missing one more slash in http:/localhost:1337/uploads/ca472ad50d814fbb963e8b5a5b12742d.jpg, should be http://
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