I’m working on a simple blog, I’m using Vue3 and Villus to send GraphQL queries. I build a component that shows all my posts. This works fine, in this component I send the ID in the URL for a single Post. For that, I build a blogpost_gql component. I need the ID for a GraphQL… Read More Get 'id' from '$route.params'-URL to call it in useQuery
I use nuxt 3 I have a navigation bar, it has NuxtLink with the attribute :to. Links have a dynamic route category/${slug}/ The problem is that the :to attribute does not overwrite the current navigation, but adds it to the end of the current one, like that category/${slug}/category/${slug}/ If I use the usual to attribute,… Read More NuxtLink and Vue router duplicate routes
so I have a button here that only clickable, but won’t redirect to URL. Any ideas? Thank you! <button class="w-max h-min flex justify-center items-center px-3 py-2 bg-white text-tersiary rounded-xl"href="url here"@click="onclick">{{ btnText }}Button Text!</button> >Solution : If you’re using vue router you could do : <button class="…" @click="$router.push(url here)">{{ btnText }}Button Text!</button>
I’m currently working on an eCommerce app using Django and Vue.js and I am currently trying to find out why my CartItem.vue component is not working. Its suppose to display the product, product price, the number of products selected, and the total price of the number of products selected. <template> <tr> <td> <router-link :to="item.product.get_absolute_url">{{ item.product.name… Read More Vue.js – Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'product')
Using the extendRoutes attribute for nuxt’s router, I am attempting to differentiate paths ending with a slash and paths that do not. This is due to how the CMS we are using handles paths. I could differentiate them by distinguishing the overview page as a path ending in /all or /overview, but it’s not ideal.… Read More ( Nuxt's Vue-router ) How to differentiate path ending with "/" and without
What I am trying to achieve The basic idea is to send a user to another route when a cookie is received in the Nuxt router middleware. The middleware is always called both on server-side and client-side, and it works perfectly in the dev environment. The problem that happens only in production is that the… Read More nuxtServerInit not receiving cookies
I have a long api call in my vuex store and if I change the route before it’s finished and dispatch the same action from another page with a quicker api call the first call will eventually overwrite the second call. The action looks like this: async getData({ commit }, payload) { try { const… Read More Changing route before long api call finishes overwrites vuex store
My current url is http://localhost:8080/component, and in this page I have an <a> tag <a :href="’/detail/’ + comp._id"></a> When comp._id is determined, for example it is 6221add333182348e1d70104. I want the URL to jump to http://localhost:8080/component/detail/6221add333182348e1d70104 when I click on the link. But actually it is http://localhost:8080/detail/6221add333182348e1d70104. How can I achieve this ? >Solution : You… Read More Vue <a> tag href attribute splicing
<img v-if="visibl" :class="{logoB:visible}" src="@/assets/images/svg/logo-footer.svg" alt=":(/> data() {emphasized text return { visible: false, }; }, >Solution : You can add watch to your router in component, So: <template> <div> <img v-if="visible" :class="{logoB:visible}" src="@/assets/images/svg/logo-footer.svg" /> </div> </template> script part here export default { name: "MyComponent", data() { return { visible: false } }, watch: { $route: {… Read More How to change the logotip of pages when using vue-router?
I’m looking to define a type that loosely defines a function by return type I could write my type as type FunctType = (…param:string[]) => RouteLocationRaw Which would allow for zero+ string params and enforce that the function return RouteLocationRaw. Ideally though, I would accept any function with any params, as long as it returns… Read More Typescript type function without specifying params