Блог

У меня есть компонент vue, который имеет вход, поэтому для использования v-модели я использую это

 <template>
  <div class="input-field">
    <input
      type="text"
      v-model="value"
      :id="inputId"
      placeholder=""
      @input="updateText"
    />
    <label :for="inputId">{{ label }}</label>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  name: "InputField",
  props: {
    value: { type: String },
    inputId: { type: String },
    label: { type: String },
  },
  setup(props, { emit }) {
    const value = ref("");
    const updateText = () => {
      emit("input", value.value);
    };
    return {
      value,
      updateText,
    };
  },
};
</script>

<style lang="less" scoped>
</style>
 

Поэтому, когда я консолировал, я использовал v-модель в родительском компоненте, но значение не меняется, поэтому я попытался распечатать @входные данные .. Он возвращает 2 значения.. Значение входных данных и объекта ref

 <div class="login-box">
    <InputField
        v-model="username"
        label="Username "
        inputId="username"
        @input="printUser"
    />
    <input type="text" />
<div>{{ username }}</div>
 

Любая помощь.. Спасибо!

В vue 3 v-model на компоненте находится синтаксический сахар для

 <input-field
  :model-value="username"
  @update:model-value="username = $event"
></input-field>
 

таким образом, компонент поля ввода должен быть

 <template>
  <div class="input-field">
    <input
      type="text"
      :value="modelValue"
      :id="inputId"
      placeholder=""
      @input="updateText"
    />
    <label :for="inputId">{{ label }}</label>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  name: "InputField",
  props: {
    ...
    modelValue: { type: String },
    ...
  },
  setup(props, { emit }) {
    const updateText = (e) => {
      emit("update:modelValue", e.target.value);
    };
    return {
      updateText,
    };
  },
};
</script>