Vue: How do you bind a value to an input through a wrapper component?

Question

I know you can use v-model to bind a value to an input in the same component. How do you create a wrapper component for an input and bind a value to it?

Login.vue

<template>
  <div id="Login">
    <Input v-bind:value="email"/>    
    <Input v-bind:value="password"/>

  </div>
</template>
<script>
  import Input from './Input.vue'
  import Button from './Button'

  export default {
    name: 'Login',
    components: {
        Input,
        Button,
    },
    data: () => ({
        email:'test',
        password:'test',
    }),
    methods: {
        login: () => { debugger; }, //this.email and this.password are still set to test
    }
  }
</script>

Input.vue

<template>
  <div class="input>
   <input v-model="value"/>
  </div>
</template>
<script>
  export default {
    name: 'Input',
    props: {
        value: String,
    },
  }
</script>

Current set up results in

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Is the only way to do this by emitting an event?

Anatoly Shishkin · Accepted Answer · 2019-11-04 16:20:25Z

2

The best way is use v-model for wrapper and on/emit for input

<div id="Login">
    <Input v-model="email"/>    
    <Input v-model="password"/>    
</div>

...

<div class="input>       
   <input        
     v-bind:value="value"
     v-on:input="$emit('input', $event.target.value)"
   >
</div>

answered Nov 4, 2019 at 16:20

Anatoly Shishkin

796 bronze badges

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

Comments

Alexey Nazarov · Accepted Answer · 2019-11-04 16:17:55Z

2

If I got it correctly, you can try to create transparent wrapper (in my case AppInput)

SomeParent.vue

<div>
  <AppInput v-model="parentModel" />
</div>

AppInput.vue

<template>
  <input
    class="app-input"
    v-bind="$attrs"
    :value="value"
    v-on="{
      ...$listeners,
      input: event => $emit('input', event.target.value)
    }">
</template>

<script>
export default {
  name: "AppInput",
  inheritAttrs: false,
  props: ["value"]
};
</script>

one of articles

answered Nov 4, 2019 at 16:17

Alexey Nazarov

413 bronze badges

Comments

Marlo · Accepted Answer · 2024-05-28 12:33:28Z

You can implement v-model directly in the input component by doing so.

<template>
  <div class="input">
   <input :value="value" @input="$emit('input', $event.target.value)"/>
  </div>
</template>
<script>
  export default {
    name: "Input",
    props: ["value"]
  }
</script>

And then use it in your parent component like this:

<template>
  <div id="Login">
    <Input v-model="email"/>    
    <Input v-model="password"/>
  </div>
</template>
<script>
  import Input from "./Input.vue"
  import Button from "./Button"

  export default {
    name: "Login",
    components: {
        Input,
        Button,
    },
    data: () => ({
        email: "test",
        password: "test",
    }),
    methods: {
        login: () => { debugger; }, //this.email and this.password are still set to test
    }
  }
</script>

See here

Collectives™ on Stack Overflow

Vue: How do you bind a value to an input through a wrapper component?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related