我正在使用vue并尝试实现动态axios GET查询,该查询将根据搜索表单中填写的内容动态生成。现在我在单个文件组件中有这个方法:
更新:
<template lang="pug">
div
form(@submit.prevent="search")
input(type='text', name="user_seq_id", placeholder="Customer ID")
input(type='text', name="registered", placeholder="Registration date")
input(type='text', name="email", placeholder="E-Mail")
input(type='text', name="organization", placeholder="Organization")
input(type='text', name="firstname", placeholder="Firstname")
input(type='text', name="lastname", placeholder="Lastname")
button(type="submit") Submit
</template>
<script>
export default {
data () {
return {
}
},
methods: {
search(e) {
let user_seq_id = e.target.elements.user_seq_id.value,
registered = e.target.elements.registered.value,
email = e.target.elements.email.value,
organization = e.target.elements.organization.value,
firstname = e.target.elements.firstname.value,
lastname = e.target.elements.lastname.value,
params = {
filter: 'role',
role: 'User',
sort: 'registered|desc'
}
if ( user_seq_id ) {
_.set(params, 'user_seq_id', user_seq_id)
params.filter = params.filter + ',user_seq_id'
}
if ( registered ) {
_.set(params, 'registered', registered)
params.filter = params.filter + ',registered'
}
if ( email ) {
_.set(params, 'email', email)
params.filter = params.filter + ',email'
}
if ( organization ) {
_.set(params, 'organization', organization)
params.filter = params.filter + ',organization'
}
if ( firstname ) {
_.set(params, 'firstname', firstname)
params.filter = params.filter + ',firstname'
}
if ( lastname ) {
_.set(params, 'lastname', lastname)
params.filter = params.filter + ',lastname'
}
this.$store.commit('users', null)
return this.$axios.get('/users', {
params: {
filter: 'role',
role: 'User',
sort: 'registered|desc'
}
})
.then( ({ data, headers, request, status, statusText }) => {
return this.$store.commit('users', data.result)
})
}
}
}
</script>
这里有谁知道以某种方式简化这个?我发现每次重复自己都很倾向,我相信有更好的方法可以做到这一点。如您所见,我正在使用“lodash”将属性注入“param”对象。
提前致谢!!!
因为你只是想重构代码,所以我没有考虑你用来设置params
的逻辑。
你可以试试这个:
methods:{
search(e) {
let data = {
user_seq_id: e.target.elements.user_seq_id.value,
registered: e.target.elements.registered.value,
email: e.target.elements.email.value,
organization: e.target.elements.organization.value,
firstname: e.target.elements.firstname.value,
lastname: e.target.elements.lastname.value
};
let params = {
filter: 'role',
role: 'User',
sort: 'registered|desc'
};
Object.keys(data).forEach((key) => {
if(data[key]){
this.modifyParams(params, key, data[key]);
}
});
this.$store.commit('users', null)
this.$axios.get('/users', {
params: params
})
.then( ({ data, headers, request, status, statusText }) => {
return this.$store.commit('users', data.result)
})
},
modifyParams(obj, key, value){
_.set(obj, key, value)
obj.filter = obj.filter + ',' + key;
}
}
PS:因为在JavaScript中,对象通过引用传递,原始的params
对象只会被修改