vue解析前端对象为Array数组并且遍历
2024-01-09 23:44:53
例如这个res.data对象：
{
"id": "15",
"name": "火灾"
}
这样子解析吧：
let types = JSON.parse(JSON.stringify(res.data))
console.log("types is " + types)
console.dir(types)
for(var i = 0; i < types.length; i++) {
console.log("types[i] is " + types[i])
console.dir(types[i])
this.disasterTypeOptions.push({
value: types[i].id,
label: types[i].name
})
}
主要代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
<link rel="stylesheet" href="../../styles/common.css"/>
<link rel="stylesheet" href="../../styles/page.css"/>
<style>
.selectInput {
position: relative;
width: 100%;
min-width: 100px;
}
.selectInput .flavorSelect {
position: absolute;
width: 100%;
padding: 0 10px;
border-radius: 3px;
border: solid 1px #FF903D;
line-height: 30px;
text-align: center;
background: #fff;
top: 50px;
z-index: 99;
}
.selectInput .flavorSelect .items {
cursor: pointer;
display: inline-block;
width: 100%;
line-height: 35px;
border-bottom: solid 1px #f4f4f4;
color: #666;
}
.selectInput .flavorSelect .none {
font-size: 14px;
}
#disasterPublic-add-app .uploadImg .el-form-item__label::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
</style>
</head>
<body>
<div class="addBrand-container" id="disasterPublic-add-app">
<div class="container">
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
:inline="true"
label-width="180px"
class="demo-ruleForm"
>
<div>
<el-form-item
label="灾情类型:"
prop="disasterType"
>
<el-select v-model="disasterTypeId" placeholder="请选择灾情类型">
<el-option
v-for="item in disasterTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
size="20"
>
</el-option>
</el-select>
</el-form-item>
</div>
<div>
<el-form-item
label="灾情名称:"
prop="name"
>
<el-input
v-model="ruleForm.name"
placeholder="请填写灾情名称:"
maxlength="20"
/>
</el-form-item>
</div>
<div>
<el-form-item
label="灾情地址:"
prop="locationName"
>
<el-input
v-model="ruleForm.locationName"
placeholder="请填写灾情地址"
maxlength="20"
/>
</el-form-item>
</div>
<div>
<el-form-item
label="灾情图片:"
class="uploadImg"
>
<el-upload
class="avatar-uploader"
action="/common/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-change="onChange"
ref="upload"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
></img>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
</el-form-item>
</div>
<div class="address">
<el-form-item
label="灾情描述:"
prop="description"
>
<el-input
v-model="ruleForm.description"
type="textarea"
:rows="3"
placeholder="物资描述，最长200字"
maxlength="200"
/>
</el-form-item>
</div>
<!--todo -->
<div class="subBox address">
<el-form-item>
<el-button @click="goBack()">
取消
</el-button>
<el-button
type="primary"
@click="submitForm('ruleForm')"
>
保存
</el-button>
<el-button
v-if="actionType == 'add'"
type="primary"
class="continue"
@click="submitForm('ruleForm','goAnd')"
>
保存并继续发布新的灾情
</el-button>
</el-form-item>
</div>
</el-form>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script src="../../api/disasterPublic.js"></script>
<script>
new Vue({
el: '#disasterPublic-add-app',
data() {
return {
disasterTypeOptions: [],
disasterTypeId: '',
id: '',
restKey: 0,
textarea: '',
value: '',
imageUrl: '',
actionType: '',
dishList: [],
vueRest: '1',
index: 0,
inputStyle: {'flex': 1},
ruleForm: {
'name': '',
'id': '',
'image': '',
'description': '',
'approvalState': '',
'isRevoke': false,
'locationName': null,
'status': true,
},
mak: false
}
},
computed: {
rules() {
return {
'name': [
{'required': true, 'message': '请填写灾情名称', 'trigger': 'blur'}
],
'disasterType': [
{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}
],
'locationName': [
{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}
],
'description': [
{'required': true, 'message': '请选择灾情类型', 'trigger': 'blur'}
],
}
}
},
created() {
this.initDisasterTypeOptions()
this.id = requestUrlParam('id')
this.actionType = this.id ? 'edit' : 'add'
if (this.id) {
this.init()
}
},
mounted() {
},
methods: {
initDisasterTypeOptions() {
allDisasterType().then(res => {
if (String(res.code) === '1') {
let types = JSON.parse(JSON.stringify(res.data))
for (var i = 0; i < types.length; i++) {
console.log("types[i] is " + types[i])
console.dir(types[i])
this.disasterTypeOptions.push({
value: types[i].id,
label: types[i].name
})
}
} else {
this.$message.error(res.msg || '获取灾情类型失败')
}
})
},
async init() {
queryDisasterPublicById(this.id).then(res => {
console.log(res)
if (String(res.code) === '1') {
this.ruleForm = {...res.data}
this.ruleForm.price = String(res.data.price / 100)
this.ruleForm.volume = String(res.data.volume / 100)
this.ruleForm.weight = String(res.data.weight / 100)
this.ruleForm.status = res.data.status == '1'
this.imageUrl = `/common/download?name=${res.data.image}`
} else {
this.$message.error(res.msg || '操作失败')
}
})
},
submitForm(formName, st) {
this.$refs[formName].validate((valid) => {
if (valid) {
let params = {...this.ruleForm}
params.status = this.ruleForm ? 1 : 0
params.price *= 100
params.volume *= 100
params.weight *= 100//todo
if (!this.imageUrl) {
this.$message.error('请上传灾情图片')
return
}
if (this.actionType == 'add') {
delete params.id
addDisasterPublic(params).then(res => {
if (res.code === 1) {
this.$message.success('灾情添加成功！')
if (!st) {
this.goBack()
} else {
this.imageUrl = ''
this.ruleForm = {
'name': '',
'id': '',
'image': '',
'description': '',
'status': true,
}
}
} else {
this.$message.error(res.msg || '操作失败')
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
} else {
delete params.updateTime
editDisasterPublic(params).then(res => {
if (res.code === 1) {
this.$message.success('灾情修改成功！')
this.goBack()
} else {
this.$message.error(res.msg || '操作失败')
}
}).catch(err => {
this.$message.error('请求出错了：' + err)
})
}
} else {
return false
}
})
},
handleAvatarSuccess(response, file, fileList) {
// 拼接down接口预览
if (response.code === 0 && response.msg === '未登录') {
window.top.location.href = '/backend/page/login/login.html'
} else {
this.imageUrl = `/common/download?name=${response.data}`//后端的url
this.ruleForm.image = response.data
}
},
onChange(file) {
if (file) {
const suffix = file.name.split('.')[1]
const size = file.size / 1024 / 1024 < 2
if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
this.$refs.upload.clearFiles()
return false
}
if (!size) {
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
return file
}
},
goBack() {
window.parent.menuHandle({
id: '8',
url: '/backend/page/disasterPublic/list.html',
name: '灾情发布'
}, false)
}
}
})
</script>
</body>
</html>
文章来源:https://blog.csdn.net/ws_please/article/details/135491575
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！