I have a div tag with an 'id="meet"' into v-dialog.
I need to access the node of this tag after I open the dialog.
I am using
let node=document.querySelector("#meet").
My problem is that it always returns "null".
Here is the codepen: https://codepen.io/luizalves/pen/NWxKbXQ
What is wrong here?
According to your CodePen, it returns null only on first open.
The content of the component is loaded dynamically by default, only after the first opening of the v-dialog.
You could add eager prop to v-dialog element to force it.
<v-dialog
v-model="dialog"
max-width="290"
eager
>
...
Related
I have a div tag with an 'id="meet"' into v-tabs.
I need to access the node of this tag after I click a tab. I am using
let node=document.querySelector("#meet").
My problem is that it always returns "null". Here is the codepen: https://codepen.io/luizalves/pen/WNrepxz
What is wrong here?
There is no guarantee that after $nextTick you will see DOM element immediately.
<div id="meet"></div>
<button #click="onTest">test</button>
...
methods: {
onTest () {
let node=document.querySelector("#meet");
console.log('meet here',node)
},
After you clicked test you'll see in a console:
"meet here" "<div id='meet'></div>"
You can try to extract this div with an unique id into a separate component and inside it you can use mounted hook to know that it exists in DOM
Of course, according to vuetify docs, you may add eager prop to v-tab-item component, and that's it, but...possibly you are doing something wrong.
It's not a good idea to always add this prop because you are losing one of the vuetify 2.X advantages - lazy loading. This may lead to big performance problems if there are many elements on the tab.
Maybe it would be better if you will work directly with reactive variables (like variables in v-model directive), not DOM objects.
I am getting strange behaviour when trying to dynamically update the content of a slot in Vue with Vuetify. I'm sure this is just a function of misunderstanding how slots work.
I have a slot in a custom component, like so:
<template #selectButtons="slotProps">
<v-icon #click="dropToggle(slotProps.player)"
:color="dropColor(slotProps.player)"
class="mr-5"
>
fas fa-skull-crossbones
</v-icon>
</template>
When the user clicks on the icon, it is meant to toggle the icon to different colors.
I cannot seem to get dropColor to fire on each click consistently, HOWEVER, the weird part is, if I make some change inside the <v-icon> component, like say I just add {{dropColor(slotProps.player)}} inside the v-icon tags, then all of a sudden the code will work.
But then if I do a full refresh of the page, it stops working. Then I delete that code and put it back in, then it works again!
I have tried forceUpdate and keys on the v-icon tag.
Would appreciate any help
You are trying to pass function dropColor(slotProps.player) as props. The better idea is to replace function to an object or variable and change that object/variable within method dropToggle(slotProps.player) after #click event is firing .
I’m using Vue & Vuetify to create my app. With vuetify I’m using v-expansion-panels to create an accordion style display. Each v-expansion-panel itself contains a custom component.
I have noticed these components are not created until the expansion panel is clicked for the first time. After that, using keep-alive allows all reactive properties and methods of the child component to be active (this is my desired behavior).
How can I force the child components to be created when the parent is created? This, any method triggered in the created() lifecycle hook of a child component should fire when the parent is created.
This Codepen is an example of the current behavior. Note: be sure to look at the console when you click the panel.
If you think about it, it actually makes sense to lazy load content of expansion panels since it is useless work if the user never opens them anyway. So probably the thing you try to accomplish has some better approach, but if you still like it then my advice is to find a way of programatically opening / closing the panel (as seen here) and quickly open it and close it when rendering parent component. In this way, you will have your child component created and the UI will remain the same.
A Vuetify solution should be achievable by adding the eager prop to a v-expansion-panel-content element in the Expansion Panel. This should force any components or content contained within the v-expansion-panel-content element to render on mounted.
<v-expansion-panels v-model="panels">
<v-expansion-panel>
<v-expansion-panel-content eager>
<custom-component />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...
<v-layout v-for="(section, index) in fields.link_sections" :key="index">
<h2>{{section.header}}</h2>
<v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>
If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?
Your syntax is wrong, try this snippet:
<v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>
Denotes the target route of the link.
I am attempting to access a child component's $refs inside a b-modal.
On page load, I can see with vue dev tools that "agent-edit" has not been created. If I put the component outside of b-modal, it does show and I can access it -- however I need this to load inside a modal. How can I access $refs.editAgent? Can I force this child component to load with the page?
<b-modal id="editModal" ref="editModal" title="Edit Agent" size="lg">
<agent-edit ref="editAgent"></agent-edit>
<div slot="modal-footer" class="w-100"></div>
</b-modal>
Refs are relative to the component they are created in (not the child components)
// use this
this.$refs.editAgent
// Not this
this.$refs.editModal.$refs.editAgent
Note that b-modal is lazy by default, meaning the content is not rendered (instantiated) in the document until the modal is shown.
Once the modal is finished opening, you should have access to the refs (they don't exist until they are rendered into the DOM)
Listen for the modal's shown event, and then access the refs once that event is emitted.
I guess, that there is no <agent-edit> inside <b-modal>, when you try to call the method.
When the modal is hidden, there is no need to render the child components. Try to first show the modal and then access its children (maybe even with a Vue.$nextTick to make sure everything is finished).
In your case, this.$refs.editModal.$refs.editAgent should work.
But pay attemption to the use of $refs and think about emitting events.