Vuetify – A Weblog of Priyank Maniar

Learning about V-list, V-list-item-group

priyankmaniar — Fri, 30 Jun 2023 09:00:33 +0000

So, as we know we can set a value at v-list-item and a model at v-list-item-group. This works great for most cases.

I once had a bit different setup where, inside the v-list-item, I had several elements, and in that order viz. v-list-item-title, v-hover, v-row, v-col, v-menu, v-list, and v-list-item.

Now, the problem was, the value of the main v-list-item-group model was set to a random value when the v-list item was clicked (inside the v-menu). The solution then I found was, I set the value to the v-list-item (inside the v-menu) to the expected value. That resolved the value issue.

The second issue that appeared was since the v-list-item of the v-menu now has a value, and it’s also a current/active value of the model, it was solved then by the following:

I put flat to v-list, so that the background styling disappears, next the icon color was a bit heavy, which was then manually set to grey, the expected colour, via primary attribute. Last was the font-weight which was set to the v-list-item and that solved it.

In the ui we had a listing of some items, which had options of edit and delete.

Validating image existence on the client side with JavaScript, Vue & Vuetify

priyankmaniar — Tue, 13 Jun 2023 05:28:37 +0000

Validating an image path on a client-side is slightly tricky. It is easy with

1	<v-img @error

for simple usage but for a more real-world or complex setup, where we want to programmatically check whether the image path is valid or not is slightly tricky.

1
2
3

<v-img v-if="!showIconFromCommon && !showInitials"
:src="getIconPath()" :title="appName" @error="setShowIconFromCommon"
/>

However, with the following function, life is easy. One thing to note though: it throws a browser error, if the image is found missing. I’m yet to look into if the error can be suppressed by wrapping a try/catch block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// CHECK IF IMAGE EXISTS
checkIfImageExists (url, callback) {
const img = new Image()
img.src = url

if (img.complete) {
callback(true)
} else {
img.onload = () => {
callback(true)
}

img.onerror = () => {
callback(false)
}
}
},

Usage:

1
2
3
4
5
6
7

self.checkIfImageExists(self.getIconPath(), (exists) => {
if (exists) {
self.showIconFromCommon = false
self.showInitials = false
} else {
}
})

Vue 2 (and Vuetify): Allow only numeric characters for phone

priyankmaniar — Tue, 17 Jan 2023 13:05:11 +0000

I used watch for this but there’s one small little tricky part.


1
2
3
4
5
6
7
8
9
phone: function (val) {



            let self = this;



            self.$nextTick(function () {

                self.phone = val.replace(/[^\d.-]+/g, '');

            });



        },

That is, we need to put a $nextTick to make this work.

Vuetify: Working with v-dialog in a single file component (SFC)

priyankmaniar — Mon, 23 May 2022 11:12:43 +0000

I often make all dialogs as a single file component (SFC). Then there are a couple of problems that I come across, but there are solutions to those so nothing to worry.

First is when rendering the component use a v-if. For props as well as the source of the dialog which makes the dialog appear and disappear. It helps solve an important issue.

1
2
3
4

<dialog-add-edit-device-name
:params="addEditDeviceDialogParams"
v-if="editUserNameParent && editUserNameCategoryParent && addEditDeviceDialog"
>dialog-add-edit-device-name>

When inside a component (SFC), VDialog (v-dialog) does not render mounted each time. Only the first time. We are having v-if (on the v-dialog model) here so that makes mounted run each time but there are more reasons to have v-if as well (but I don’t remember ). Otherwise we could also run into an issue where the dialog opens fine only once. This could happen if we are reading from props and assigning it to a data property inside mounted, since mounted runs only once and when clicked outside, if we do not make the data property false, it would not open the dialog again. Solution to this is mentioned below.

It is important for me to allow escape or outside click but that was resulting a bug with opening multiple dialogs.

For the following code please notice the

1	@keydown.esc

and

1	@click.outside

they both call the closing method which simply makes the dialog variable as false but for now we need to do this manually. Otherwise, it gets buggy.

1
2
3
4
5
6
7

<v-dialog
v-model="$props.params.addCategoryDialog"
transition="dialog-bottom-transition"
max-width="600px"
@keydown.esc="closeAddCategoryDialog()"
@click:outside="closeAddCategoryDialog()"
>v-dialog>

Please note the above learnings are in context of Vue 2 and not Vue 3.

All Learnings for v-dialog

priyankmaniar — Fri, 04 Mar 2022 08:06:25 +0000

V-Dialog fullscreen hiding behind WordPress Sidebar

1
2
3
4

"editDialog" persistent="" max-width="800px" :retain-focus="false" fullscreen="" transition="dialog-bottom-transition" style="z-index:20001;">

</v-dialog>

The trick is to add the z-index to the v-dialog

[Solved] Vuetify V-Select Not Showing Placeholder/Label

priyankmaniar — Sun, 09 Jan 2022 11:48:56 +0000

The problem: V-select was not showing the placeholder.

The solution is easy but nearly impossible to know at first.

1	="topic" :items="topicForJS" label="Select Topic" outlined="" persistent-placeholder="" placeholder="Select Topic" :error-messages="topicErrors"></v-select>

The

1	persistent-placeholder

in combination with the

1	placeholder

does the trick.

V-select now displaying the placeholder text.

Perhaps this applies on v-autocomplete as well?