Custom Vue Input Component not Displaying Bound Value

Question

I've created a vue component to reuse thoughout my app but I'm struggling with one aspect the value being initially displayed in the input text field. It feels like there is something I'm misunderstanding about the the render cycle and how value binding works.

Here is the Vue component that I've made:

<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",
  ],
  computed: { 
    value() {
      console.log(this.defaultValue);
      return this.defaultValue
    },
  },
  methods: {
    action(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

and I reference it in my parent component as such:

<base-input label="Base Input 2" id="in2" name="name" v-model="value"></base-input> {{value}}

when the page loads the {{value}} displays value as expected, but the input does not actually display the text

You need to listen for @input in the parent

Dan Knights
– Dan Knights

2020-10-27 13:55:04 +00:00
Commented Oct 27, 2020 at 13:55 — Dan Knights
– Dan Knights, Commented Oct 27, 2020 at 13:55

Nikhil Joshi · Accepted Answer · 2020-10-27 14:10:49Z

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>

answered Oct 27, 2020 at 14:10

Nikhil Joshi

1171 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam M. Over a year ago

Thanks! I appreciate you putting the time in to help me on this

tony19 · Accepted Answer · 2022-07-16 02:58:50Z

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

Collectives™ on Stack Overflow

Custom Vue Input Component not Displaying Bound Value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related