<div class="yewuType" v-for="(item,index) of elementAdd" :key='index'>

  <div>
    <div>业务类型</div>
    <select @change="GetWweidu($event)">
      <option
        :value="type.type"
        v-for="(item, index) of type"
        :key="index"
        >{{ item.dimensionType }}</option
      >
    </select>
  </div>
  <div class="wd">
    <div>维度</div>
    <input
      type="text"
      class="weiduipt"
      placeholder="请输入维度"
      @input.stop="wuduipt($event)"
      style="width: 200px; height: 30px;"
      ref="weiduinput"
    />
    <ul
      v-if="srcResult.length > 0"
      @click.stop="clickVl($event)"
      ref="ulu"
      style="list-style:none"
    >
      <li v-for="(item, index) in srcResult" :key="index">
        <div>
          <span>{{ item.content }}~{{ item.id }}</span>
        </div>
      </li>
    </ul>
    <ul v-else>
      <li v-for="(item, index) in curData" :key="index">
        <div>{{ item.content }}</div>
      </li>
    </ul>
  </div>
  <div class="wd">
    <div>添加环境信息</div>
    <div class=" tianjiahuanjing">
      <input type="checkbox" name="" id=""  @click="DDDD" :checked="flag==true?'checked':null" />
      <button @click.stop="addElement" >添加</button>
    </div>
  </div>
</div>
methods: {
DDDD(){
  this.flag=!this.flag;
  console.log(this.flag);
 
},
//搜索
async searchAction(e) {
  await this.$axios
    .post(
      "http://172.24.148.199:7003/dimension/searchContent",
      qs.stringify({
        content: e.target.value,
      })
    )
    .then((res) => {
      // console.log(res, e);
      this.coursData = res.data.data;
      this.inputValue = e.target.value; // eslint-disable-line no-unused-vars
      this.searchResult = this.coursData.filter((item) => {
        if (item.content.includes(this.inputValue)) {
          return item;
        }
      });
    });
},
//填入输入框
clickValue(e) {
  // console.log(e);
  // this.coursData.filter((item) => {
  //   if (item.content.includes(this.inputValue)) {
  // this.inputValue = item;
  // console.log(this.inputValue);
  this.$refs.input.value = e.target.innerText;
  this.$refs.liDiv.style.display = "none";
  let str = this.$refs.input.value;
  let arr = str
    .split("~")
    .splice(1, 1)
    .toString();
  this.mainID = arr;
  //     return item;
  //   }
  // });
},
//搜索维度
async wuduipt(e) {
  // console.log(e);
  await this.$axios
    .post(
      "http://172.24.148.199:7003/dimension/searchContent",
      qs.stringify({
        content: e.target.value,
        type: this.fuwuType,
      })
    )
    .then((res) => {
      this.curData = res.data.data;
      this.iptValue = e.target.value; // eslint-disable-line no-unused-vars
      this.srcResult = this.curData.filter((item) => {
        if (item.content.includes(this.iptValue)) {
          return item;
        }
      });
    });
},
//点击填入input 框
clickVl(e) {
  // console.log(e);
  //  console.log(this.$refs.weiduinput);
  for (var key in this.$refs.weiduinput) {
  console.log(this.$refs.weiduinput[key].value, "@@11");
   this.$refs.weiduinput[key].value = e.target.innerText;
   this.$refs.ulu[key].style.display = "none";
  }
 
  
  let str = this.$refs.weiduinput[key].value;
  let arr = str
    .split("~")
    .splice(1, 1)
    .toString();
  // console.log(arr);
  this.weiduID = arr;
  // this.weiduID.push(arr)
  // });
},

async GetData(e) {
  await this.$axios
    .post("http://172.24.148.199:7003/dimension/getDimensions")
    .then((res) => {
      this.type = res.data.data;
    });
},
//类型
async GetWweidu(e) {
  this.fuwuType.push(e.target.selectedIndex + 1)
  // this.fuwuType = e.target.selectedIndex + 1;
  console.log(e.target.selectedIndex + 1);

  await this.$axios
    .post(
      "http://172.24.148.199:7003/entity/getDimentsionByType",
      qs.stringify({
        type: this.fuwuType,
      })
    )
    .then((res) => {
      this.weiduData = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
},
// wedudata(e) {
//   console.log(e);
//   this.weiduID = e.target.value;
// },

focus() {
  this.$refs.liDiv.style.display = "block";
},
getfoucs() {
  for (var  key in this.$refs.ulu) {
    this.$refs.ulu[key].style.display = "block";
  }
},
async addElement() {
  this.elementAdd++;
},

async create() {
  console.log(111);
  await this.$axios
    .post("http://172.24.148.199:7003/entity/createEntity", {
      mainDemension: this.mainID,
      dimentsionIds: [this.fuwuType, this.weiduID],
      name: this.$refs.stname.value,
      parentArgs: this.$refs.jcbl.value,
      args: this.$refs.stbl.value,
      tags: this.$refs.tag.value,
    })
    .then((res) => {
      console.log(res);
      alert(res.data.msg);
    });
},

},

1.input 可以用 v-model 做绑定
2.结合 v-bind 解析，用循环的 key 做每个input 绑定值的区分