I have a v-autocomplete where users be able to search, and I would like to keep the one that's in the v-autocomplete component if there are no matching results. But normal behaviour for a v-autocomplete is to remove what's on the component if there is no matching result.
I have created a method named testBlur() which I call on the blur event for the v-autocomplete component.
Is anybody be able to help me with this?
codepen: https://codepen.io/pen/gBWEVB
Thank you.
Combo box solved this issue.
As Gil mentioned you could use a Combo box with Advanced custom options. https://vuetifyjs.com/en/components/combobox
Related
I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
I'm using Vuetify (2.6.1) data tables and they work great.
I wonder if it is possible to customize the UI of a particular case:
-> when the v-data-table is in responsive into the mobile breakpoint.
The UI looks like this:
data table list on mobile - sort field highlighted
Is it possible, just in this case, to customize the select highlighted in red here ?
I tried to update the the global CSS but things are not clean because when an item is selected from the list there is a v-chip added:
data table list on mobile with sort selected
I would like the select to look like and behave just like in this case here highlighted in red:
vuetify documentation - select solo style
I searched on the documentation and API, stack overflow, vuetify github's and tried different ways but I haven't found a way on how to properly style the sort select input.
Is anyone have any idea ? Maybe I'm missing something.
Thank you for your help.
You can use the dynamic slots item.<name> and customise v-select or v-autocomplete inside: https://vuetifyjs.com/en/components/data-tables/#item
in a vuetify table i do not want to show some headers and their corresponding column. Instead, I want them to be displayed in a table in the extended-item slot. The items of the table are completely user editable. This all works fine too.
The problem is that in the extended-item slot not only the properties of the selected item are displayed, but the properties of all items.
In the vue-dev-tools it is displayed correctly. I think I'm missing something fundamentally simple here. Does anyone have any ideas?
Thanks in advance
Here is the link to the sandbox: v-data-table in expanded-item slot of v-data-table, user editable
You can do it changing :items="tabItems" by :items="[item]" (i put inside array because one item alone is not legible by :items v-data-table.
If you call tabItems you will iterate over all items again so its better to use filtered expanded-item item instead do hard work manually.
I tried in your sandbox, you can change line 54 with my suggestion and you could check that its working well.
How to make dropdown scroll to the last selected option after dropdown is re-opened?
Calling filtering_select_ref.dropdown.set('selected', selected_node_ref) or filtering_select_ref.set('scrollOnFocus', true) did not work for me on IE 11.
If you just need to scroll to the option, you could use win.scrollIntoView(node_ref) from "dojo/window" module as shown in the docs and pass the id or the node reference to the option as an argument.
You may also find these methods interesting to help solve your problem:
filtering_select_ref.openDropDown()
var dropdown = filtering_select_ref.dropdown;
dropdown.selectFirstNode()
dropdown.selectNextNode()
dropdown.selectPreviousNode()
dropdown.selectLastNode()
#Carlos Nantes suggested good options however I was aware of them and my problem with them was that I could not "catch" the moment when dropdown got opened.
I finally found a way to "catch" that moment with filtering_select_ref.watch('_opened', function()...
watch doc can be found here
I am getting problem in accessing the control inside a component. The scenario is I have a datagrid in which I have a component in which I have a textarea. Now by selecting a menu option I need to focus the textarea.
Pls help me in referring the textarea. I need to setfocus in that textarea.
Thanks in advance.
You can say
myDataGrid.editedItemPosition = {rowIndex:4, columnIndex:1};
myDataGrid.editedItemRenderer.myTextArea.text = "blah";
That will probably only work if your component is set as the itemEditor and not the itemRenderer.