如何使用 Vue.js 设置和获取输入组件的值?
How can I set and get the value of an input component using Vue.js?
我试图在创建时为某些输入组件设置初始值,然后在单击按钮后获取这些值(如果它们发生更改)。
这可以很好地设置初始值:
<template>
<div class="editUserInfo">
<input type="text" id="acName">
<input type="text" id="acUsername">
<input type="text" id="acEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
<script>
data(){
return{
tokenExists: false,
userCookie: {
id: '',
secret: '',
expire_at: ''
},
newUserInfo: {
nuName: '',
nuUsername: '',
nuEmail: '',
},
actualUserInfo: {
acName: '',
acUsername: '',
acEmail: '',
}
}
},
methods: {
checkToken(){
if (this.$cookie.get('secret') == null){
this.tokenExists = false;
}else{
this.tokenExists = true;
var userInfo = JSON.parse(this.$cookie.get('secret'));
this.id = userInfo.user_id;
this.secret = userInfo.secret;
this.expire_at = userInfo.expire_at;
this.acName = userInfo.name;
this.acUsername = userInfo.username;
this.acEmail = userInfo.email;
}
},
mounted(){
document.getElementById("acName").value = this.acName;
document.getElementById("acUsername").value = this.acUsername;
document.getElementById("acEmail").value = this.acEmail;
}
...
</script>
但是我需要输入组件中的 v-model 属性 才能在单击按钮时获取这些值。当我添加 v-model 属性 值被正确初始化但是当我通过更改其中一个的值来测试组件时,其他输入组件被清除。
这不起作用:
<template>
<div class="editUserInfo">
<input type="text" id="acName" v-model="newUserInfo.nuName">
<input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
<input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
以为这是丢失变量的问题,但我测试了在控制台中打印它们,它们没有改变或未定义。
无需使用 document.getElementById 我们可以使用数据部分绑定到 v-model
<template>
<div class="editUserInfo">
<input type="text" id="acName" v-model="newUserInfo.nuName">
<input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
<input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
在你的脚本部分
<script>
data(){
return{
tokenExists: false,
userCookie: {
id: '',
secret: '',
expire_at: ''
},
newUserInfo: {
nuName: '',
nuUsername: '',
nuEmail: '',
},
actualUserInfo: {
acName: '',
acUsername: '',
acEmail: '',
}
}
},
mounted(){
this.newUserInfo.nuName = 'somevalue'
this.newUserInfo.nuUsername = 'somevalue
this.newUserInfo.acEmail = 'somevalue'
}
在 'somevalue' 中给出你喜欢的任何值,在方法 checkToken() 中也像 mounted() 一样使用它
我试图在创建时为某些输入组件设置初始值,然后在单击按钮后获取这些值(如果它们发生更改)。
这可以很好地设置初始值:
<template>
<div class="editUserInfo">
<input type="text" id="acName">
<input type="text" id="acUsername">
<input type="text" id="acEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
<script>
data(){
return{
tokenExists: false,
userCookie: {
id: '',
secret: '',
expire_at: ''
},
newUserInfo: {
nuName: '',
nuUsername: '',
nuEmail: '',
},
actualUserInfo: {
acName: '',
acUsername: '',
acEmail: '',
}
}
},
methods: {
checkToken(){
if (this.$cookie.get('secret') == null){
this.tokenExists = false;
}else{
this.tokenExists = true;
var userInfo = JSON.parse(this.$cookie.get('secret'));
this.id = userInfo.user_id;
this.secret = userInfo.secret;
this.expire_at = userInfo.expire_at;
this.acName = userInfo.name;
this.acUsername = userInfo.username;
this.acEmail = userInfo.email;
}
},
mounted(){
document.getElementById("acName").value = this.acName;
document.getElementById("acUsername").value = this.acUsername;
document.getElementById("acEmail").value = this.acEmail;
}
...
</script>
但是我需要输入组件中的 v-model 属性 才能在单击按钮时获取这些值。当我添加 v-model 属性 值被正确初始化但是当我通过更改其中一个的值来测试组件时,其他输入组件被清除。
这不起作用:
<template>
<div class="editUserInfo">
<input type="text" id="acName" v-model="newUserInfo.nuName">
<input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
<input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
以为这是丢失变量的问题,但我测试了在控制台中打印它们,它们没有改变或未定义。
无需使用 document.getElementById 我们可以使用数据部分绑定到 v-model
<template>
<div class="editUserInfo">
<input type="text" id="acName" v-model="newUserInfo.nuName">
<input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
<input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
<button v-on:click.prevent="updateInfo">Update</button>
</div>
</template>
在你的脚本部分
<script>
data(){
return{
tokenExists: false,
userCookie: {
id: '',
secret: '',
expire_at: ''
},
newUserInfo: {
nuName: '',
nuUsername: '',
nuEmail: '',
},
actualUserInfo: {
acName: '',
acUsername: '',
acEmail: '',
}
}
},
mounted(){
this.newUserInfo.nuName = 'somevalue'
this.newUserInfo.nuUsername = 'somevalue
this.newUserInfo.acEmail = 'somevalue'
}
在 'somevalue' 中给出你喜欢的任何值,在方法 checkToken() 中也像 mounted() 一样使用它