Hello I am trying to learn vue independently by building a small project.
I want to search for products displayed on the page.
I use vue,vuex and vuetify.
I would love to get an idea of how to do this.
this is link to my project
Thank you
You can use v-autocomplete
v-autocomplete by default is meant to searchable.
Updated codesandbox
Related
Table.vue contains Row.vue and Form.vue inside.
Wanted behavior:
Row of the table will say the component comes from Row.vue
I was right-clicking the Row and went on "View page source", "inspect" and explored, but I couldn't find the answer.
Any solutions?
Also it would be awesome if there's a tool that helps with what I explained above with visual like this: instead of margin, border and such. It would be like Table.vue, Row.vue, etc...
I'm sorry it's not clear to me what you're trying to achieve, but there is a browser-based tool that might help you with debugging. It is compatible with both v2 and v3 and can be installed on firefox or chromium-based browsers
https://devtools.vuejs.org/
use this icon to target the component
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
Is there a tool to build documentation for vuejs components in a way similar to what Quasar or Vuetify do for their own components? ie: a browseable table with tabs corresponding to prop, slot, methods, events?
Is there anythis similar to what is Sphinx for Python, ie a tool that does introspection of the code to collect info to show?
Searching in google returned a lot of docuemntation ON veujes rather than how to document our vuejs code...
From my limited research, I've found this one: https://vuese.org. I haven't tried it though.
There are a lot of autocomplete components to VueJS on the internet, but none that I found fit to my project.
I need a autocomplete component with the requisits:
Able to use v-model;
The list is just a suggestion. The input is free to type;
The component is css customizable (I want to use a simple bootstrap design on it).
Can someone help me?
I'm learning Vue and Vuetify right now. And I want to develop a Calendar tool combining Vuetify with Laravel.
With v-calendar it is possible to render multiple 'event-indicators'
See example
With Vuetify 'one' event indicator is possible (example), but I don't know how to manage to make it two or even three. Is there any solution for this?
Yes we can, just pass an array for all the colors you want to assign on a particular date, using the allowed-dates prop. It has been included in the vuetify examples as well.
Refer: https://vuetifyjs.com/en/components/date-pickers/#date-pickers-events
Yeah had a play around with it but doesn't seem you can get it to display multiple events as it is :( You can submit it as a feature though here and they're usually quite quick to respond if it's possible or not. Sorry I can't help any other way.