I recently replaced a dropdown with Vue Multiselect.
I intend to make the multiselect options accessible.
The issue:
When I press tab the focus does come on the multiselect and read out the default option.
But, when I press the down arrow key to scroll through the options, the screen reader fails to read them out.
I have tried invoking a fuction to programatically set focus on the child options but that didn't quite seem to completely work,
The following sets focus on the default, but I don't know how to set focus on the child options,
this.$refs.managermultiselect.$el.focus()
Following is the HTML,
<multiselect v-model="value"
aria-autocomplete="list"
aria-activedescendant=""
ref="managermultiselect"
label="LastName"
#keydown.native="keymonitor"
:options="manageroptions"
:multiple="true"
:custom-label="customLabel">
</multiselect>
Related
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
>
...
I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.
It would be ideal for the button to change color while disabled.
This is a problem, since color is a property, and I can't overwrite it's value...
Also, when I try to invoke super.click(e), I get an error.
You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx
Your Btn component should just "use" v-btn rather than extending it.
v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>.
#click event is captured and reemited as-is after doing what needs to be done
See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56
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 been trying and investigating about disabling the form by default.
<v-form ref="form" v-model="valid" lazy-validation>
<v-select v-model="test" :items="data" :disabled="status"></v- select>
<v-text-field v-model="name" :disabled="status"></v-text-field>
</v-form>
I don't see any disable prop to the v-form. So i am just adding disabled prop to each and every input field to solve this problem. Like Angular adding disable prop to <fieldset> tag or to the form looks simple, is there any thing available in vuetify? any other approach to do this?
I have looked into this my self, made my own form that extends VForm and tried making a disabled directive for it (v-disabled="isDisabled").
Unfortunately at the moment without the knowledge and time to extend all of the components and buttons in question, what you are currently doing is the only way or else you get the mutating prop warning on setting disabled directly with an iterator and trying to set isDisabled will throw an "has no setter method error".
Vuetify needs to update the input and button components to allow pragmatic changes to the disabled property.
Having to set :disabled on each element isn't really that drastic but yes I agree that from the parent form it would be nice to have.