[Bug] FormGroupInput v-model not updating value of variable bound to it

[whatl3y]

Version

2.0.0

Reproduction link

N/A

Operating System

macOS Big Sur

Device

Macbook Pro

Browser & Version

Chrome 91.0.4472.77

Steps to reproduce

1. Add data prop in component with myVar -- data () { return { myVar: "" }}
2. Add fg-input to your page with v-model -- <fg-input placeholder="My Input" v-model="myVar"></fg-input>
3. Try and add text and log value of myVar, which never changes regardless of text entered

What is expected?

myVar variable should update as expected when user enters text in input.

What is actually happening?

myVar value never changes regardless of the text that's entered.

---

Solution

Additional comments

[whatl3y]

original #35

[dragosct]

Hi, @whatl3y! Thanks for using our products. Please see below the changes in src/components/Inputs/FormGroupInput.vue that you have to make to work properly:

<template>
  <div
    class="form-group"
    :class="[
      { 'input-group': hasIcon },
      { 'has-danger': error },
      { 'has-danger': isError },
      { 'input-group-focus': focused },
      { 'has-label': label || $slots.label },
      { 'has-success': !error && touched },
      { 'has-success': isValid },
    ]"
  >
    <slot name="label">
      <label v-if="label" :class="labelClasses">
        {{ label }}
        <span v-if="required">*</span>
      </label>
    </slot>

    <slot name="addonLeft">
      <div v-if="addonLeftIcon" class="input-group-addon input-group-prepend">
        <i :class="addonLeftIcon"></i>
      </div>
    </slot>
    <slot>
      <input
        v-bind="$attrs"
        class="form-control"
        :class="[{ valid: value && !error }, inputClasses]"
        aria-describedby="addon-right addon-left"
        :value="modelValue"
        v-model="model"
      />
    </slot>
    <slot name="addonRight">
      <span v-if="addonRightIcon" class="input-group-addon input-group-append">
        <i :class="addonRightIcon"></i>
      </span>
    </slot>

    <slot name="infoBlock"></slot>
    <slot name="helpBlock">
      <div
        class="text-danger invalid-feedback"
        style="display: block"
        :class="{ 'mt-2': hasIcon }"
        v-if="error"
      >
        {{ error }}
      </div>
    </slot>
  </div>
</template>
<script>
export default {
  name: "fg-input",
  inheritAttrs: false,
  emits: ["update:modelValue"],
  model: {
    prop: "modelValue",
  },
  props: {
    modelValue: [String, Number],
    isError: Boolean,
    isValid: Boolean,
    required: Boolean,
    label: String,
    error: String,
    labelClasses: String,
    inputClasses: String,
    addonRightIcon: String,
    addonLeftIcon: String,
  },
  data() {
    return {
      touched: false,
      focused: false,
    };
  },
  computed: {
    model: {
      get() {
        return this.modelValue;
      },
      set(check) {
        if (!this.touched) {
          this.touched = true;
        }
        this.$emit("update:modelValue", check);
      },
    },
    hasIcon() {
      const { addonRight, addonLeft } = this.$slots;
      return (
        addonRight !== undefined ||
        addonLeft !== undefined ||
        this.addonRightIcon !== undefined ||
        this.addonLeftIcon !== undefined
      );
    },
  },
  methods: {
    updateValue(evt) {
      let value = evt.target.value;
      if (!this.touched && value) {
        this.touched = true;
      }
      this.$emit("update:modelValue", value);
    },
    onFocus(value) {
      this.focused = true;
      this.$emit("focus", value);
    },
    onBlur(value) {
      this.focused = false;
      this.$emit("blur", value);
    },
  },
};
</script>
<style></style>

Regards,
Dragos

[whatl3y]

Thank you! While the v-model is now working, I'm now getting the following errors in console in case you can help there

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "value" was accessed during render but is not defined on instance. 
  at <FgInput class="mb-4" label="Password" type="password"  ... > 
  at <PasswordAccountModal id="password-account-modal" > 
  at <PasswordManager accountId="" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView key=2 > 
  at <DashboardLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {toggleSidebar: ƒ, …} > > 
  at <RouterView> 
  at <App>

[dragosct]

Hi, @whatl3y! You have here :class="[{ valid: value && !error }, inputClasses]", please replace value with modelValue.

Regards,
Dragos