How to use @material/notched-outline - 10 common examples

mounted () {
    if (!(this.getOutline instanceof Function)) { // can not be init by parent
      this.mdcNotchedOutline = MDCNotchedOutline.attachTo(this.$el)
    }
  },
  beforeDestroy () {

} = MDCnotchedOutlineFoundation.cssClasses;

    const adapter = {
      addClass: className => {
        this.$set(this.outlinedClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.outlinedClasses, className);
      },

      setNotchWidthProperty: width =>
        this.$set(this.notchStyles, 'width', `${width}px`),
      removeNotchWidthProperty: () => this.$delete(this.notchStyles, 'width'),
    };

    this.foundation = new MDCnotchedOutlineFoundation(adapter);
    this.foundation.init();

    const key = this.$slots.default ? OUTLINE_UPGRADED : NO_LABEL;
    this.$set(this.outlinedClasses, key, true);
  },

} = MDCnotchedOutlineFoundation.cssClasses;

    const adapter = {
      addClass: className => {
        this.$set(this.outlinedClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.outlinedClasses, className);
      },

      setNotchWidthProperty: width =>
        this.$set(this.notchStyles, 'width', `${width}px`),
      removeNotchWidthProperty: () => this.$delete(this.notchStyles, 'width'),
    };

    this.foundation = new MDCnotchedOutlineFoundation(adapter);
    this.foundation.init();

    const key = this.$slots.default ? OUTLINE_UPGRADED : NO_LABEL;
    this.$set(this.outlinedClasses, key, true);
  },

mounted() {
    const {
      OUTLINE_UPGRADED,
      NO_LABEL,
    } = MDCnotchedOutlineFoundation.cssClasses;

    const adapter = {
      addClass: className => {
        this.$set(this.outlinedClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.outlinedClasses, className);
      },

      setNotchWidthProperty: width =>
        this.$set(this.notchStyles, 'width', `${width}px`),
      removeNotchWidthProperty: () => this.$delete(this.notchStyles, 'width'),
    };

    this.foundation = new MDCnotchedOutlineFoundation(adapter);
    this.foundation.init();

mounted() {
    const {
      OUTLINE_UPGRADED,
      NO_LABEL,
    } = MDCnotchedOutlineFoundation.cssClasses;

    const adapter = {
      addClass: className => {
        this.$set(this.outlinedClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.outlinedClasses, className);
      },

      setNotchWidthProperty: width =>
        this.$set(this.notchStyles, 'width', `${width}px`),
      removeNotchWidthProperty: () => this.$delete(this.notchStyles, 'width'),
    };

    this.foundation = new MDCnotchedOutlineFoundation(adapter);
    this.foundation.init();

componentDidMount() {
    this.foundation = new MDCNotchedOutlineFoundation(this.adapter);
    this.foundation.init();
    this.notch();

    if (this.label) {
      this.label.style.transitionDuration = '0s';
      this.addClass(cssClasses.OUTLINE_UPGRADED);
      requestAnimationFrame(() => {
        if (this.label) {
          this.label.style.transitionDuration = '';
        }
      });
    }
  }

        if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }
        if (menuFactory === void 0) { menuFactory = function (el) { return new MDCMenu(el); }; }

        if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }
        this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);

      outlineFactory: MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),
  ) {

      outlineFactory: MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),
      menuFactory: MDCMenuFactory = (el) => new MDCMenu(el),