如何在一个搜索框中输入多个字段的值进行查询？

Question

`
<template>
<div>

<el-input v-model="input" placeholder="请输入内容,多个内容逗号分隔"></el-input>
<el-button type="primary" @click="submit()">搜索</el-button>

</div>
</template>

<script>
export default {
data() {

return {
  input: '',//用来接受input框的值
  name:'',//  用来存储foreach的对应的值
  id:'',//  用来存储foreach的对应的值
  dq:''//  用来存储foreach的对应的值
}

},
methods:{

submit(){
  console.log(this.input);// 打印
  let str = this.input;//  声明变量接受input的值
  let strArr = str.split(",");//   用来分隔str值  如 {1,2,3}  分隔后  {1},{2},{3}
  console.log(strArr);
  for(let i = 0;i<strArr.length;i++){//  循环strArr  从0开始循环   到strArr的长度结束
    this.name = strArr[0];//  name 接受第一个位置的值
    this.id = strArr[1];//  id 接受第二个位置的值
    this.dq = strArr[2];//  dq 接受第三个位置的值
     var url  =  this.$global.serverPath + "/pulicApi/addInfo?name="+this.name+"&id="+this.id+"&dq="+this.dq
    console.log(this.name+this.id+this.dq);// 打印
  }
}

}
}
</script>
`

就是类似上图这种的搜索,就是一个搜索框输入多字段的值,点击搜索时向后台提交的时候。一个值对应一个字段：例如name=张三，id=0314这种的。
但是现在有一个问题就是如果说搜索框的值按照正常的输入内容,是没有问题的。name,id,dq依次输入。这种方式是可以接受到值,要是顺序乱了,id,name,dq按照这种的方式输入的话。后台接受到的值就乱了
求各位给个思路。

Answer 1

let str="张三,0314,邯郸"
let strArr=str.split(",")
console.log(strArr)