I have a component to use custom input. I'm using veevalidate with it and it's working perfect.

But today I realize I can't set value when use with axios request.

It's working when set a just string or predefined data like this.a = '1' :value="this.a"

                  <CustomInput
                type="text"
                name="surname"
                placeholder="surname"
                :value="'testparam'" // or :value="this.a"
                inputClass="form-control form-control-solid h-auto mb-1 mt-2"
                />

but when try to set value(coming from backend) to component nothing show up.

Like this

data () {
    return {
      userInfo: {
        name: '',
        surname: '',
        phone: ''
      }
    }
  },

    async created () {
        await this.axios.get(this.$store.state.baseUrl   'user/personalInfo').then((response) => {
          this.userInfo = response.data
          console.log(this.userInfo)
        })
      }

and set

<CustomInput
                type="text"
                name="surname"
                placeholder="surname"
                :value="this.userInfo.name" // doing nothing
                inputClass="form-control form-control-solid h-auto mb-1 mt-2"
                />

I tried async created and normal created with methots but nothing changed.

My CustomInput.vue

    <template>
  <input
    :name="name"
    :id="name"
    :type="type"
    :value="inputValue"
    :inputmode="type"
    :placeholder="$t(placeholder)"
    :class="[inputClass, { 'has-error': !!errorMessage, success: meta.valid }, notRequired ? 'notreq' : '']"
    @input="handleChange"
    @blur="handleBlur"
    maxlength="255"
  />
  <p class="help-message" v-show="errorMessage">
    {{ errorMessage }}
  </p>
</template>

<script>
import { useField } from 'vee-validate'

export default {
  props: {
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    inputClass: {
      type: String,
      default: ''
    },
    notRequired: {
      type: Boolean,
      default: false
    }
  },
  setup (props) {
    const {
      value: inputValue,
      errorMessage,
      meta,
      handleBlur,
      handleChange
    } = useField(props.name, undefined, {
      initialValue: props.value
    })
    return {
      errorMessage,
      inputValue,
      meta,
      handleBlur,
      handleChange
    }
  }
}
</script>

<style scoped>

input {
  background-color: #f3f6f9;
  color: #3f4254;
  padding: 12px;
  border-radius: 0.42rem;
  width: 100%;
  border: none;
}

input::placeholder {
  color: #c9c9d4;
  font-weight: 400;
}

input:focus-visible {
  outline: none;
}

input:focus {
  background-color: #ebedf3;
  color: #3f4254;
}

.help-message {
  margin: 0;
  color: #fd6a57;
  font-size: 0.9rem;
  font-weight: 400;
  width: 100%;
  text-align: center;
}

.has-error {
  background-image: url("data:image/svg xml,");
  background-repeat: no-repeat;
  background-position: right calc(0.375em   0.325rem) center;
  background-size: calc(0.75em   0.65rem) calc(0.75em   0.65rem);
}

.success {
  background-image: url("data:image/svg xml,");
  background-repeat: no-repeat;
  background-position: right calc(0.375em   0.325rem) center;
  background-size: calc(0.75em   0.65rem) calc(0.75em   0.65rem);
}

.notreq {
  background-image: none !important;
}

.newsletter {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
</style>

CodePudding user response：

I think this issue because of your axios request. Before the axios request fulfilled, CustomInput component rendered with default props and the useForm composition API initialized with empty value.

My solution: You can watch value props in CustomInput component setup method. Then every time it's value changed, update the value:

watch(
    () => props.value,
    (newValue, oldValue) => {
       console.log("value props changed: ", newValue);
       inputValue.value = newValue;
    }
);

In addition you have an issue in CustomInput props. Try to send userInfo.name instead of this.userInfo.name in template section!

You can see my code in this codesandbox project.