[Vuejs]-Custom Vue Input Component not Displaying Bound Value

by

2👍

✅

Change the defaultValue prop to value as shown below. This should setup a two-way binding between your child and parent.

<template>
      <div class="my-2">
        <label for="name">{{ label }} </label>
        <input
          :id="id"
          :name="name"
          :class="{
            input: true,
            'input-error': errorMessage && errorMessage != '',
          }"
          :value="value"
          v-on:input="action"
          :type="type"
          :required="!!required"
          v-once
        />
        <p v-show="errorMessage && errorMessage != ''" class="error-message">
          {{ errorMessage }}
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: "BaseInput",
      props: [
        "value",
        "label",
        "type",
        "id",
        "name",
        "errorMessage",
        "required",
      ],
      methods: {
        action(e) {
          this.$emit("input", e.target.value);
        },
      },
    };
    </script>
👤Nikhil Joshi

1👍

in order to achieve a two way binding on a custom component you have to follow a special syntax on your child component. You have to pass the value as a prop and emit the input on a method. Try updating you’re code like this:

<template>
  <div class="my-2">
    <label for="name">{{ label }} </label>
    <input
      :id="id"
      :name="name"
      :class="{
        input: true,
        'input-error': errorMessage && errorMessage != '',
      }"
      :value="value"
      v-on:input="action"
      :type="type"
      :required="!!required"
      v-once
    />
    <p v-show="errorMessage && errorMessage != ''" class="error-message">
      {{ errorMessage }}
    </p>
  </div>
</template>

<script>
export default {
  name: "BaseInput",
  props: [
    "defaultValue",
    "label",
    "type",
    "id",
    "name",
    "errorMessage",
    "required",
    "value"
  ],
  methods: {
    action(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

with value as a prop and not a computed property. More about this on the docs

👤Andres Abadia

Leave a comment