Vue-url-component

<template>
  <div>
     <URL
      id="facebookUrl"
      name="facebookUrl"
      social-type="FACEBOOK"
      :tabindex="1"
      :placeholder="'Facebook Url'"
      :value="urlValue"
      :hide="false"
      :disabled="false"
      @focus="onFocus"
      @>
      @>
      :validation-regx="facebookUrlRegex"
    />
    <p
      v-show="invalidFacebookUrlError"
      :class="{
        control: true,
        'error-msg': invalidFacebookUrlError
      }"
    >
      <span>The url entered is not valid and must be changed</span>
    </p>
  </div>
</template>
 
<script>
import URL from "vue-weblineindia-url";
export default {
  components: { URL },
  data: function() {
    return {
      urlValue: "",
      invalidFacebookUrlError: false,
      facebookUrlRegex: /(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?/    };
  },
 
  methods: {
   /** on focus url field */
    onFocus(event) {
      event.target.placeholder = "";
    },
    /** on blur url field */
    onBlur(event, placeholder, errorObj) {
      event.target.placeholder = placeholder;
      const id = event.target.id;
      this.showUrlErrorMsg(id, errorObj);
    },
    /**
     * To show invalid url error msg
     */
    showUrlErrorMsg(id, errorObject) {
      if (errorObject.items.length > 0) {
        errorObject.items.map(err => {
          const urlId = err.field;
          switch (urlId) {
            case "facebookUrl":
              this.invalidFacebookUrlError = true;
              break;
          }
        });
      }
    },
    /** on change value on url**/
    onChangeUrl(value, id, index, error) {
      this.invalidFacebookUrlError = false;
      this.urlValue = value;
    }
  }
};
</script>