Блог

У меня есть компонент для использования пользовательского ввода. Я использую с ним veevalidate, и он работает идеально.

Но сегодня я понимаю, что не могу установить значение при использовании с запросом axios.

Это работает, когда задается только строка или предопределенные данные, такие как this.a = ‘1’ :значение=»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"
                />
 

но при попытке установить значение(исходящее из бэкенда) для компонента ничего не отображается.

Подобный этому

 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)
        })
      }
 

и поставил

 <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"
                />
 

Я попробовал асинхронное создание и нормальное создание с помощью methots, но ничего не изменилось.

Мой пользовательский ввод.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>
 

Я думаю, что эта проблема из-за вашего запроса axios. До выполнения запроса axios CustomInput компонент отображался с реквизитами по умолчанию, а API useForm композиции инициализировался пустым значением.

Мое решение: Вы можете watch оценить реквизиты в CustomInput методе настройки компонента. Затем каждый раз, когда его значение изменяется, обновляйте значение:

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

Кроме того, у вас есть проблема с CustomInput реквизитом. Попробуйте отправить userInfo.name вместо this.userInfo.name в разделе шаблонов!

Вы можете увидеть мой код в этом проекте codesandbox.