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: '[email protected]',
username: null
},
created(){
this.username = currentUsername || this.email
}
})
console.clear()
var currentUsername = '';
var App = window.App = new Vue({
el: '#app',
data: {
email: '[email protected]',
username: null
},
created(){
this.username = currentUsername || this.email
}
})
<script src="https://unpkg.com/[email protected]/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.
