极客观点
项目管理
HarmonyOS
我这里有2个select选项 2个日期控件。
填完信息之后。
我点提交，或者继续填下面的text文本框的时候那些内容就全部自己不见了
结果就成了这样子
下面是我的代码：
<div class="row form-group">
<div class="col-lg-6">
<label class="col-sm-5 control-label">电压等级</label>
<div class="col-sm-7">
<select class="form-control" v-model="Item.StationVolLevel">
<option v-for="item in listItem.volLevelList" v-bind:value="item.StationVolLevel">{{item.Name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<label class="col-sm-5 control-label">厂站类型</label>
<div class="col-sm-7">
<select class="form-control" v-model="Item.StationType">
<option v-for="item in listItem.stationTypeList" v-bind:value="item.IntValue">{{item.Name}}</option>
</select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-6">
<label class="col-sm-5 control-label">建成日期</label>
<div class="col-sm-7">
<input onfocus="WdatePicker()" class="form-control" readonly="" v-bind:value="Item.BuildDate | dataTime" type="text">
</div>
</div>
<div class="col-lg-6">
<label class="col-sm-5 control-label">运行日期</label>
<div class="col-sm-7">
<input type="text" readonly="" class="form-control" v-on:focus="WdatePicker()" v-bind:value="Item.RunDate | dataTime" />
</div>
</div>
</div>
<div class="row form-group">
<div class="col-lg-6">
<label class="col-sm-5 control-label">联系人</label>
<div class="col-sm-7">
<input type="text" class="form-control" v-model="Item.ChiefMan" />
</div>
</div>
<div class="col-lg-6">
<label class="col-sm-5 control-label">厂站地址</label>
<div class="col-sm-7">
<input type="text" class="form-control" v-model="Item.Addr" />
</div>
</div>
</div>
<script type="text/javascript">
Vue.filter('dataTime', function (value) {
return jsonDateFormat(value, 'yyyy-MM-dd');
});
var vum = new Vue({
el: '#DataDemo',
data: {
apiUrl: "/ProjectDefine/GetStationList",
mainList: [],
Item: {},
defineItem: {
StationVolLevel: -1,
StationType:-1
},
operType: -1,//-1:详细，0：新增，1：修改
disabled: false,
errorInfo: "",
submitUrl: {
addUrl: "/ProjectDefine/AddStation",
updateUrl: "/ProjectDefine/UptadeStation",
deleteUrl: "/ProjectDefine/DeleteRole",
volLevelListUrl: "/ProjectDefine/GetVolLevelList",
stationTypeListUrl: "/ProjectDefine/GetStationTypeList"
},
listItem: {
QueryParameter:{},
volLevelList: [],
stationTypeList: []
}
},
mounted() {
this.QueryList();
},
methods: {
QueryList: function () { //查询列表
this.$http.get(this.submitUrl.volLevelListUrl).then(function (response) {
var dataJson = eval("(" + response.data + ")");
this.listItem.volLevelList = dataJson;
});
this.$http.get(this.submitUrl.stationTypeListUrl).then(function (response) {
var dataJson = eval("(" + response.data + ")")
this.listItem.stationTypeList = dataJson;
});
this.$http.get(this.apiUrl, {
params: this.defineItem
}).then(function (response) {
var dataJson = eval("(" + response.data + ")")
this.mainList = dataJson.Data;
});
},
roleByUser: function (roleItem) {
this.allUser();
this.$http.get(this.submitUrl.allUserListUrl
).then(function (response) {
var dataJson = eval("(" + response.data + ")")
this.user.userList = dataJson;
});
$("#user_role_edit_Modal").modal("show");
},
allUser: function () {
console.log("所有用户参数" + this.user.QueryParameter.userCode);
this.$http.get(this.submitUrl.userListUrl, {
params: this.user.QueryParameter
}).then(function (response) {
var dataJson = eval("(" + response.data + ")");
this.user.roleUserList = dataJson.userList;
});
},
createInfo: function () { //创建信息动作
this.errorInfo = "";
this.operType = 0;
this.Item = {};
$("#project_edit_Modal").modal("show");
},
editInfo: function (m) { //编辑信息动作
this.errorInfo = "";
this.operType = 1;
//m.RunDate = jsonDateFormat(m.RunDate, 'yyyy-MM-dd');
//m.BuildDate = jsonDateFormat(m.BuildDate, 'yyyy-MM-dd');
this.Item = {};
this.Item = m;
$("#project_edit_Modal").modal("show");
},
deleteInfo: function (m) { //删除信息动作
if (window.confirm("确认删除该角色？")) {
this.$http.post(this.submitUrl.deleteUrl, { roleId: m.Id }, function (data) {
if (data > 0) {
alert("操作成功");
}
});
}
},
infoDetailed: function (m) { //详细信息动作
this.errorInfo = "";
this.operType = -1;
this.Item = m;
var s = this.Item.RunDate;
var a = jsonDateFormat(s, 'yyyy-MM-dd');
//this.Item.RunDate = jsonDateFormat(this.Item.RunDate, 'yyyy-MM-dd');
//this.Item.BuildDate = jsonDateFormat(this.Item.BuildDate, 'yyyy-MM-dd');
$("#project_edit_Modal").modal("show");
},
onSubmit: function () { //提交内容动作
if (this.operType == 0) {
this.$http.post(this.submitUrl.addUrl, this.Item
).then(function (response) {
if (response.data == -1) {
this.errorInfo = "角色编码已存在.";
}
if (response.data > 0) {
this.errorInfo = "操作成功.";
}
});
}
if (vum.operType == 1) {
this.$http.post(this.submitUrl.updateUrl, this.Item).then(function (response){
if (response.data > 0) {
this.errorInfo = "操作成功.";
}
});
}
this.QueryList();
}
},
watch: { //监视属性变化动作
//'pageCurrent': function (val, oldVal) {
// alert(val + "----" + oldVal);
//}
},
});
</script>
找到问题原因了 日历控件跟vue js 不兼容啊