Link field - detect link type in Vue

Kirby 4 Question❓
1

Is it possible to detect when the link field type changes in Vue?

I’m building a custom block preview and I’d like to show a telephone or email icon in my preview, depending on the link type.

Unfortunately this isn’t sufficient

export default {
	computed: {
		isTel() {
			return this.content.contact.startsWith('tel:');
		}
	}
};

Because this will only work if the link field value is not blank.

I essentially need to listen for changes on the currentType value in kirby/panel/src/components/Forms/Field/LinkField.vue at main · getkirby/kirby · GitHub

But I’m not sure how to do this or if it’s possible without modifying the LinkField.vue component

Thanks

2

The link field depends itself on the value of the field. It doesn’t save the type separately. So if the value is empty, it is of no specific type.

3

I understand that. I don’t need the type to be saved separately as I can just extract the type from the link (tel: for phone, mailto: for email). I was hoping it was possible to listen for when currentType changes in the link field and adjust my Vue preview for my custom block accordingly but it sounds like that’s not possible?

4

As Nico explained, that won’t help you though. The link field does basically the same thing as your logic: It detects the type from the value. An empty field will not have any type associated with it.

5

Fair enough. I ended up using a toggles field with a text field. I would have liked to have been able to just use one link field but I understand that’s not possible.

Thanks for the help though