0

In my parent component I have a simple input as

<input v-model="value" />

export default class ParentComponent extends Vue {
  value = "" as string;


async check() {
    try {
       console.log(this.value) // this works, this get the actual value of the input
   …
  }

  }

Now I want to create a child component with that input, so I try:

<template>
  <input type="text" v-model="inputValue" />
</template>

<script lang="ts">
export default {
  name: “BaseTextBox",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
};
</script>

And in the parent component:

<BaseTextBox v-model="value" />
import BaseTextBox from "@/components/_base/BaseTextBox.vue";

The component display correctly, but when I try to access to this.value in method it display as empty string because did not get modified with v-model? How can I bind it correctly?

Jesus
  • 331
  • 1
  • 4
  • 19

1 Answers1

0

You are using wrong value "inputValue" in v-model. It would be "value". So your input will take the prop "value" as v-model and modify that directly.

Your child component would be:

<template>
  <input type="text" v-model="value" />
</template>

<script lang="ts">
export default {
  name: “BaseTextBox",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
};
</script>
Dhruv Shah
  • 1
  • 3
  • I tried but I get error `Unexpected mutation of "value" prop` – Jesus Sep 28 '22 at 20:46
  • @Jesus https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn. There is a solution to that. If you don't like that. You can also see this https://stackoverflow.com/questions/47311936/v-model-and-child-components – Dhruv Shah Sep 28 '22 at 21:10