Question

如果用户名未设置/清空，我想用电子邮件的值初始化用户名输入。在下面的代码中，我只是在用户名输入中获得[object HTMLInputElement]，但它应该是电子邮件地址。

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,
}})

Answer 1

此处的一个问题是，您的input元素包含id="username"。在浏览器中，HTML元素作为全局变量公开，其id为变量名称，因此您要定义名为username的两个全局变量。

更改其中一个。

其次，您从未在此声明中定义email的值：

username ? username : email

您可以在email对象上定义data 属性的值，但data.email !== email。 email实际上是input的{{1}}元素。而是试试这个。

id="email"

＆＃13;

var currentUsername = '';

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

＆＃13;

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
    }
})

＆＃13;

<强>更新

我想为未来的读者澄清一下。我已经离开了原来的答案。

所有主流浏览器中<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>属性are exposed on the window object的DOM元素。

所以在OP的问题中定义这两个输入元素

id

<input type="text" name="email" id="email" v-model="email"> <input type="text" name="username" id="username" v-model="username">对象上现在有两个变量，名称为window和username。

在OP的代码中，他定义了一个名为email的变量并将其设置为空字符串。

username

此变量会覆盖由具有var username = ''; id的输入元素创建的变量，因为它是使用username声明的。但是，没有任何内容覆盖窗口上的var变量。因此，当代码尝试设置数据对象的email属性的默认值时，

username

username: username ? username : email,解析为空字符串falsy，username属性的默认值设置为username全局变量的值，是带有email的输入元素的引用。

这就是为什么OP的代码显示内部带有id="email"的文本框作为值。

Vue2：具有其他数据值的Init数据

1 个答案: