我写了一个用户对象，有address地址字段，我怎么将用户选择的级联数据selectedValue值传给address，并将对象返回给后端，核心代码实现了该问题。
<script>
核心代码：
javascript
//获取住址并更新给address
let selectedValue = ref([]);
// 监听 selectedValue 的变化
watch(selectedValue, (newValue) => {
formData.address = newValue.join(",");
});
const handleChange = (value) => {
console.log(`value==${value}`);
// 更新 selectedValue 的值
selectedValue.value = value;
};js完整代码
javascript
<script >
import { reactive, ref, watch } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
//注册用户表单信息
const formData = reactive({
username: "",
password: "",
tel: "",
gender: "",
age: null,
birthday: "",
address: "",
});
//获取住址并更新给address
let selectedValue = ref([]);
// 监听 selectedValue 的变化
watch(selectedValue, (newValue) => {
formData.address = newValue.join(",");
});
const handleChange = (value) => {
console.log(`value==${value}`);
// 更新 selectedValue 的值
selectedValue.value = value;
};
//住址(固定信息)
const options = [
{
value: "河南省",
label: "河南省",
children: [
{
value: "开封市",
label: "开封市",
children: [
{
value: "兰考县",
label: "兰考县",
},
{
value: "尉氏县",
label: "尉氏县",
},
{
value: "龙亭区",
label: "龙亭区",
},
{
value: "禹王台区",
label: "禹王台区",
},
],
},
{
value: "郑州市",
label: "郑州市",
children: [
{
value: "中原区",
label: "中原区",
},
{
value: "二七区",
label: "二七区",
},
{
value: "管城回族区",
label: "管城回族区",
},
{
value: "金水区",
label: "金水区",
},
],
},
],
},
{
value: "广东省",
label: "广东省",
children: [
{
value: "深圳市",
label: "深圳市",
children: [
{
value: "福田区",
label: "福田区",
},
{
value: "龙岗区",
label: "龙岗区",
},
{
value: "南山区",
label: "南山区",
},
{
value: "宝安区",
label: "宝安区",
},
],
},
{
value: "广州市",
label: "广州市",
children: [
{
value: "海珠区",
label: "海珠区",
},
{
value: "天河区",
label: "天河区",
},
{
value: "荔湾区",
label: "荔湾区",
},
{
value: "越秀区",
label: "越秀区",
},
],
},
],
},
];
const submitForm = async () => {
try {
const response = await axios.post("/api/saveUser", formData, {
headers: {
"Content-Type": "application/json", // 根据后端需要的类型设置
},
});
if (response.data.code > 0) {
router.push({ name: "Login" }); // 成功时跳转到登录页
} else if (response.data.code === -2) {
alert(response.data.desc); // 处理特定错误码，弹出警告
} else {
alert("注册失败，请重试！"); // 其他错误情况
}
} catch (error) {
alert("注册失败，请重试！"); // 捕获异常情况
}
};
return {
formData,
submitForm,
options,
handleChange,
selectedValue,
};
},
};
</script><template>
html
<!-- 级联选择器 -->
<el-cascader
v-model="selectedValue"
:options="options"
@change="handleChange"
/>注册页面完整代码
javascript
<template>
<div class="register-form">
<h2>用户注册</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model="formData.username" required />
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="formData.password"
required
/>
</div>
<div class="form-group">
<label for="tel">手机号</label>
<input type="text" id="tel" v-model="formData.tel" required />
</div>
<div class="form-group">
<label>性别</label>
<label>
<input type="radio" v-model="formData.gender" value="男" />
男
</label>
<label>
<input type="radio" v-model="formData.gender" value="女" />
女
</label>
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" id="age" v-model.number="formData.age" required />
</div>
<div class="form-group">
<label for="birthday">出生日期</label>
<input type="date" id="birthday" v-model="formData.birthday" required />
</div>
<div class="form-group">
<label for="address">住址</label>
<!-- 级联选择器 -->
<el-cascader
v-model="selectedValue"
:options="options"
@change="handleChange"
/>
<!-- <textarea
id="address"
v-model="formData.address"
rows="3"
required
></textarea> -->
</div>
<button type="submit">注册</button>
</form>
</div>
</template>
<script >
import { reactive, ref, watch } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
//注册用户表单信息
const formData = reactive({
username: "",
password: "",
tel: "",
gender: "",
age: null,
birthday: "",
address: "",
});
//获取住址并更新给address
let selectedValue = ref([]);
// 监听 selectedValue 的变化
watch(selectedValue, (newValue) => {
formData.address = newValue.join(",");
});
const handleChange = (value) => {
console.log(`value==${value}`);
// 更新 selectedValue 的值
selectedValue.value = value;
};
//住址(固定信息)
const options = [
{
value: "河南省",
label: "河南省",
children: [
{
value: "开封市",
label: "开封市",
children: [
{
value: "兰考县",
label: "兰考县",
},
{
value: "尉氏县",
label: "尉氏县",
},
{
value: "龙亭区",
label: "龙亭区",
},
{
value: "禹王台区",
label: "禹王台区",
},
],
},
{
value: "郑州市",
label: "郑州市",
children: [
{
value: "中原区",
label: "中原区",
},
{
value: "二七区",
label: "二七区",
},
{
value: "管城回族区",
label: "管城回族区",
},
{
value: "金水区",
label: "金水区",
},
],
},
],
},
{
value: "广东省",
label: "广东省",
children: [
{
value: "深圳市",
label: "深圳市",
children: [
{
value: "福田区",
label: "福田区",
},
{
value: "龙岗区",
label: "龙岗区",
},
{
value: "南山区",
label: "南山区",
},
{
value: "宝安区",
label: "宝安区",
},
],
},
{
value: "广州市",
label: "广州市",
children: [
{
value: "海珠区",
label: "海珠区",
},
{
value: "天河区",
label: "天河区",
},
{
value: "荔湾区",
label: "荔湾区",
},
{
value: "越秀区",
label: "越秀区",
},
],
},
],
},
];
const submitForm = async () => {
try {
const response = await axios.post("/api/saveUser", formData, {
headers: {
"Content-Type": "application/json", // 根据后端需要的类型设置
},
});
if (response.data.code > 0) {
router.push({ name: "Login" }); // 成功时跳转到登录页
} else if (response.data.code === -2) {
alert(response.data.desc); // 处理特定错误码，弹出警告
} else {
alert("注册失败，请重试！"); // 其他错误情况
}
} catch (error) {
alert("注册失败，请重试！"); // 捕获异常情况
}
};
return {
formData,
submitForm,
options,
handleChange,
selectedValue,
};
},
};
</script>
<style scoped>
.register-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea {
width: 100%;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>