本文展示了如何使用Vue和Element UI创建一个文本输入框，结合后端进行数据交互。通过v-for指令动态渲染选项，提交时对用户输入进行判断，确保姓名、电话和业务类别必填。同时，提供了获取服务类型列表和提交需求信息的方法，实现了错误提示和数据清空功能。
案例：
image.png
输入框提交内容判断，与后端对接
一、结构 xml
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
提交
二、javascript
data() {
return {
options: [],
demandInfo: {
name: "",
phone: "",
sid: ""
}
};
},
三、方法
getServiceTypeList() {
let that = this;
that.$http
.post("website/getServiceTypeList")
.then(function(res) {
if (res.data.errorCode == 200) {
that.options = res.data.data;
} else {
that.$message.error(res.data.errorMsg);
}
})
.catch(function(e) {
console.log(e);
});
},
四、提交按钮判断
addDemand() {
let that = this;
if (!that.demandInfo.name) {
that.$message.error("姓名必填");
return;
}
if (!that.demandInfo.phone) {
that.$message.error("电话必填");
return;
}
if (!that.demandInfo.sid) {
that.$message.error("业务类别必选");
return;
}
let map = {
name: that.demandInfo.name,
phone: that.demandInfo.phone,
sid: that.demandInfo.sid
};
console.log(map);
that.$http
.post("website/addDemand", map)
.then(function(res) {
if (res.data.errorCode == 200) {
that.$message.success(res.data.errorMsg);
that.demandInfo.name = "";
that.demandInfo.phone = "";
that.demandInfo.sid = "";
} else {
that.$message.error(res.data.errorMsg);
}
})
.catch(function(e) {
console.log(e);
});
}
},
created() {
let that = this;
that.getServiceTypeList();
}
扫一扫
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
