Vue2: Init data with other data value

Question

I would like to initialize a username input with the value of an email if the username is not set/empty upfront. In the code below, I just get an [object HTMLInputElement] inside the username input but it should be the email address.

HTML

<input type="text" name="email" id="email" v-model="email">
<input type="text" name="username" id="username" v-model="username">

Vue

var username = '';

var App = window.App = new Vue({
    el: '#app',
    data: {
      email: 'test@test.com',
      username: username ? username : email,
}})

Bert · Accepted Answer · 2017-06-14T16:22:41.773

One of the issues here is your input element has the id="username". In browsers, HTML elements are exposed as global variables with the id as the name of the variable, so you are defining two global variables with the name username.

Change one of them.

Secondly you never define the value of email in this statement:

username ? username : email

You define the value of the email property on the data object, but data.email !== email. email is actually the input element with the id="email". Instead try this.

var currentUsername = '';

var App = window.App = new Vue({
    el: '#app',
    data: {
      email: 'test@test.com',
      username: null
    },
    created(){
       this.username = currentUsername || this.email
    }
})

console.clear()

var currentUsername = '';

var App = window.App = new Vue({
    el: '#app',
    data: {
      email: 'test@test.com',
      username: null
    },
    created(){
       this.username = currentUsername || this.email
    }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <input type="text" name="email" id="email" v-model="email">
<input type="text" name="username" id="username" v-model="username">
</div>

Update

I wanted to clarify a bit for future readers. I've left the original answer above.

DOM elements with an id property are exposed on the window object in all major browsers.

So in defining these two input elements in the OP's question

<input type="text" name="email" id="email" v-model="email">
<input type="text" name="username" id="username" v-model="username">

There are now two variables on the window object with the names username and email.

In OP's code, he defined a variable called username and set it to an empty string.

var username = '';

This variable overrides the variable created by the input element having the id of username because it is declared with a var. However there is nothing that overrides the email variable on the window. So when the code tries to set the default value of the username property of data object,

username: username ? username : email,

username resolves to an empty string, which is falsy, and the default value for the username property is set to the value of the email global variable, which is a reference to the input element with the id="email".

This is why the OP's code was showing the textbox with [object HTMLInputElement] inside as the value.

so, you are saying that window.username is a html element? it doesn't make much sense your answer — John, Jun 14 '17 at 13:14
If i change the input id to something other than `username` it's still not working. — Mike, Jun 14 '17 at 13:16
username: username ? username : email ... email variable does not exist — John, Jun 14 '17 at 13:19
username: currentUsername || email . shorter :P .. or you could set the this.username in the created() or mounted() with this.email not just email — John, Jun 14 '17 at 13:22
@BertEvans The username input should not be initialized with a global var but with the vue email data — Mike, Jun 14 '17 at 13:23
It only worked after doing the init inside the created(). Why is that needed? Why not directly inside the data definition? — Mike, Jun 14 '17 at 13:31
Because `email` is not defined. You set `data` to a an object with a property of `email` but `email` in your ternary was not the same thing. — Bert, Jun 14 '17 at 13:32

Vue2: Init data with other data value

1 Answers1