Vue.js: Setting v-model and v-bind:value on same input element

Question

I have a Vue component that contains a form that will send an email.

I am having an issue with displaying a default value in the input field. When the page loads I want the email input field to display the user's default email address and only change the value if the user over-writes it with a new email.

I know you can't have v-bind and v-model on the same <input> so how would I go about accomplishing this task?

<input
  v-model="emailAddress"
  :value="emailAddress"
  type="email"
  name="email"
  id="email-field"
/>

export default {
  props: { defaultEmail: String },
  data() {
    return {
      emailAddress: this.defaultEmail || ''
    };
  }
}

Majed Badawi · Accepted Answer · 2020-12-22 22:08:01Z

3

You only need v-model to bind the input value:

const emailComponent = Vue.component('emailComponent', { 
  template: '#emailComponent',
  data () {
    return {
      emailAddress: this.defaultEmail || ''
    }
  },
  props: { defaultEmail: String },
});

new Vue({
  el: "#app",
  components: { emailComponent }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <email-component default-email="my email"/>
</div>

<template id="emailComponent">
  <input
    v-model="emailAddress"
    type="email"
    name="email"
    id="email-field"
  />
</template>

answered Dec 22, 2020 at 22:08

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 01:46:40Z

1

v-model does the same thing as

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

So you do not need value binding, you can remove it just leave v-model. Check vue doc for more info: https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

edited Jul 15, 2022 at 1:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 22, 2020 at 22:15

laurisstepanovs

5465 silver badges21 bronze badges

Collectives™ on Stack Overflow

Vue.js: Setting v-model and v-bind:value on same input element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related