我的目标是创建一个“编辑帐户”表单,以便用户可以修改他们的帐户数据。我想以已经填充了用户数据(即用户名、电子邮件、地址...)的表单显示帐户数据
然后,用户可以修改表单中的数据并提交将更新其用户信息的表单。
我正在使用v-model将表单输入绑定到我的数据中名为accountInfo的对象,如下所示:
data() {
return {
accountInfo: {
firstName: ''
}
}
}
这是我的模板中的表单输入示例:
<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />
对象中键的值当前是空字符串,但我希望这些值来自名为userProfile的对象,该对象是 vuex 中的状态属性。
在我的“编辑帐户”组件中,我通过导入映射 vuex 状态:
import { mapState } from "vuex";
然后在计算属性中使用以下内容
computed: {
...mapState(["userProfile"])
}
我想做的不是将空字符串作为 accountInfo 的值,而是从从 vuex 映射的 userProfile 计算属性中为它们分配值,如下所示:
data() {
return {
accountInfo: {
firstName: this.userProfile.fristName,
}
}
}
这将为我的表单提供所需的初始数据,但不幸的是这不起作用,大概是因为数据在生命周期中比计算属性更早呈现。
完整代码:
编辑帐户.vue
<template>
<div class="container-fluid">
<form id="sign_up_form" @submit.prevent>
<div class="form-row">
<div class="form-group col-md-6">
<input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
</div>
</div>
</form>
</div>
</template>
<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";
export default {
name: "EditAccount",
computed: {
...mapState(["userProfile"])
},
data() {
return {
accountInfo: {
firstName: this.userProfile.firstName
}
};
}
};
</script>
商店.js:
export const store = new Vuex.Store({
state: {
userProfile: {firstName: "Oamar", lastName: "Kanji"}
}
});