So have a a MainLauyout.vue file
In that file I have a Toolbar component and a content component like so
<!--MainLayout.Vue-->
<Toolbar />
<Content></Content>
Within Content component I have a search bar with #input
Within the Content component
I have a router-view that displays another vue.
Within that vue, I have a table with a search function defined.
I was wondering how its possible to put that function in the #input that is in the Toolbar component. From what I was able to search they say to use refs but I'm not sure how to get that to work with my layout structure. Can anyone let me know the best way to do this?
Related
this is a question about best practices, in short: what is the best way to implement this function
I used the vue cli to create a project to train on. And so the normal template it provided me with was a side header thing with the content on the side, and so I made some modifications:
the issue is visualized down if the text explaination wasn't clear
and so what I had in mind was to add a slot in the header "the left side" to add the adding button, and the button wouldn't need to be visible in the other tabs, like the help tab.
App.vue
<template lang="pug">
TheHeader
routerView( v-slot="{ Component }" )
transition( name='slide-fade' mode='out-in' )
component( :is="Component" )
</template>
but here comes the issue, as you can see the tabs are in router views and the router view is beside the header component. the solution I had in mind was to:
add a list of strings in the App.vue with ["help", "course", ...] in the script section
the strings are linked to what router is being used (not very sure how to do this but I guess I could do a v-model to the v-slot being used)
pass the string to the header component
include a v-if statement with every tab's little widget
but I felt like this alone will jank the code a lot and thought if maybe there was an easier way to pass an entire component from one child to another it would be great. if there isn't I'd just like to know if it's the best practice I could do and proceed with this solution
issue visualization:
wanted behavior mock-up:
the solution was to use the Built In <Teleport> Vue component. this way I just type <Teleport to="..."> and it will go where I want
I am kinda new to vue js and I really need some advice from you to do this task.
In my vue-laravel application,
I have multiple pages, and a component.
i need to provide an prop to that component, So I can use it as an Id.
But that componet is already applied in multiple pages. So I have to add that prop to each and every vue pages , that component has added,
Do we have any way to send an id to the componet(as a prop or anything else) without having to declare it in other pages.
Ex:
first.vue
<component id='1' />
secind.vue
component should be able to define without id property as well
<component />
If I understand you correct you want to pass data from your parent.vue to your childs child.vue.
So to answer your question: you have to declare your props in every component below your parent
If you send e.g. your index from parent to child it look like this:
parent.vue
<child :indexParent="index"/>
in your child.vue you have to define your property in your script like this:
props: ["indexParent"]
than you can use this value in here - if you want to have it in your child from your child.vue you have to send it again to it's child like this:
child.vue
<childsChild :indexParent="indexParent"/>
and than you can define it again in your props.
Hopefully this answer helps you out!
I currently have the following problem with nested <router-view>s in my app and I want to know if this is even the right way to do it.
I have a navigation.vue route component with child routes configured in the router.
In this component, I have multiple <router-view>s (in a v-for loop).
Every router-view has its own link and if you click on it, the clicked container which holds the router-view will start a transition and reveal the content (the page.vue component).
To fire the transition before confirming the navigation, I listen for the beforeRouteUpdate() hook.
However, I now want to add other navigation components inside this navigation, so that I have something like that:
<navigation>
<page/>
<page/>
<navigation>
<page/>
<page/>
</navigation>
<page/>
</navigation>
The hook to open the sub-navigation seems to work - but if I try to open a page on the second level, the navigation component can't get the $refs that belong to itself. I see the beforeRouteUpdate() hook of the first level navigation being called. I think that's to be expected because it's still in the background, holding the second level navigation and its pages.
What can I do to only use the functionality of the second level navigation when it's opened?
Should I make some checks in the beforeRouteUpdate() hook, and are they both fired?
I'm probably confused because I don't know if the component is being reused or something - in my understanding it should be a second instance of the component.
I'm also using <keep-alive> around the <router-view>s - so if that's a problem and things work differently with that, I'd also be glad to get a hint.
Thanks!
I’m not sure if this will fix your problem but in this vue school video they talk about the Vue Router not always picking up on changes if the same component is being used. You can handle it by adding a key to the router-view like <router-view :key=“$route.path” />. Then any change to the path will trigger a reload of the component. Maybe you can experiment with adding keys to your nested <router-view>s?
I solved it this way:
Both beforeRouteUpdate() hooks are called, so I had to make sure which of the existing navigations should do the work. The upper level navigations skip the hook.
I also needed some checks to only render the navigation in the <router-view> if it is in the $route.match array of the current route.
i'm using vue single component and passing props inside my blade fie...!
is there any way that i can hide props when viewing page-source ?
here is my output from page-source in chrome!
<my-component name="name" :brand="user_id":1,"created_at":null,"updated_at":null}" ></my-component>
i know that i can use spa but i want to know if there is any way that we hide theme when viewing page-source?!
I know in vue, I can use this.$parent to get the upper component in the vdom tree. But I'm expecting something different: to get the component that rendered the current component.
For instance, I have a component (named comp-container) with template:
<template>
<comp-a>
<comp-b></comp-b>
</comp-a>
</template>
And in comp-b the $parent would be an instance of comp-a not comp-container which I'm expecting.
My current aproach is traversing up with the $parent attribute until I find comp-b exists in $options.components. This method is working for now but seems quite ugly and breaks if comp-b is a globaly registered component. Is there an official way to do this?
Passing the parent template component via props as <comp-b :container="this"></comp-b> may do the job, but it's too verbose to be liked.
I'm not sure about the exact use case, but basically if there are slots involved (which I almost assume, because otherwise $parent will work fine), you can find the rendering component at:
this.$slots.default[0].context;
Basically, the context property of a slot is the rendering context (rendering component - i.e. the component who's template the component was rendered in).
Only tested with Vue 2