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.
Related
I have installed, "vuedraggable": "^4.1.0",
Works very well, and orders well, but inputs lost focus on any keypress action with v-model.
The problem is definitely with vuedraggable and v-model.
<draggable
:list="widgets"
item-key="name"
class="list-group"
ghost-class="ghost"
#update="saveUpdatedOrder"
>
....
<el-input
v-model="element.name"
class="add-new-item__title"
placeholder="Title"></el-input>
When I want to change element.name value, this input loses focus, so after every character I need to touch input again and put focus on him, to be able to continue charging text.
Any idea?
This is probably caused because you use the element.name in the input field and as the key for vue-draggable. Since vue is keeping track of DOM-elements by its key in a v-for loop, I think changing the name will make vue to delete the DOM element and create a new one, with the new key as identifier. That is why it looks like the input is loosing focus, while it actually is another input element.
Changing item-key="name" to another unique property of the widget object, like title or id, will solve the problem. Since you did not provide the widgets array, I cannot be clear on what would be a usable property.
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 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 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>
I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify.
For e2e testing I use the Cypress.
Below is my scenarios of test in Cypress:
I have a problem while creating test for page where I use v-autocomplete component.
The problem is that I can't use Vuetify native classes to get the element I want to test.
below is an example with data-cy selector
<v-autocomplete
v-model="model"
:items="items"
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
data-cy="autocomplete"
></v-autocomplete>
I type some text into search input.
Then in v-autocomplete have been found search results.
And example of one of there is below:
...
<div>
<a class="v-list__tile v-list__tile--link theme--light">
<div class="v-list__tile__content">
<div class="v-list__tile__title">Result item
<span class="v-list__tile__mask">result item</span>
</div>
</div>
</a>
</div>
...
Then I want select one of search items by clicking to one of found results.
And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers).
How I can add data-cy selector into result search html item?
Maybe who know any another way to resolve this problem?
I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).
In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector
For example,
cy.contains('div', 'itemTextToSelect').parent('a').click()
If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).
BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.