iPad/iPhone JS Error on link clicking

We have void added to social media links like this

<a v-if="moduleInstance.showLinkedin" :href="(moduleInstance.linkedinUrl && !isEditor) ? moduleInstance.linkedinUrl : 'javascript:void(0)'" :target="target"

but on iPhones and iPads we get an error

Safari cannot run this script because JavaScript is not allowed to be run this way

popup when customer does not add link and this void script is triggered. So it seems we should not add that part to our ternary conditional.

What could we added instead?

piljac1

3 years ago

Level 28

The javascript:void(0) is considered bad because of the unconventional behavior it can cause and possible JS errors like you encountered. An alternative which would probably give you the same behavior would be to put a # in your href if the condition is false and the add a @click event listener in which you would prevent default if your condition is false.

1 like

rhand

3 years ago

Level 6

@piljac1 Tried

<a v-if="moduleInstance.showLinkedin" :href="(moduleInstance.linkedinUrl && !isEditor) ?  moduleInstance.linkedinUrl :  '#'" :target="target"

But then I need to add 'v-on:click.self.prevent' . as well and that has not worked out yet. Testing some more.

piljac1

3 years ago

Best Answer

Level 28

@rhand Check the CodeSandbox I made. Is that what you want?

<template>
  <a
    v-if="moduleInstance.showLinkedin"
    :href="hasLinkedInUrl ? moduleInstance.linkedinUrl : '#'"
    @click="handleLinkedInUrlClick"
    :target="target"
  >
    LinkedIn URL
  </a>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      isEditor: false,
      target: "_blank",
      moduleInstance: {
        showLinkedin: true,
        linkedinUrl: null,
      },
    };
  },

  computed: {
    hasLinkedInUrl() {
      return this.moduleInstance.linkedinUrl && !this.isEditor;
    },
  },

  methods: {
    handleLinkedInUrlClick(event) {
      if (!this.hasLinkedInUrl) {
        event.preventDefault();
      }
    },
  },
};
</script>

1 like

rhand

3 years ago

Level 6

@piljac1 Thanks for that!

Please or to participate in this conversation.