动态添加element标签，数据操作

我的问题每次点击 添加新值按钮就会添加一个下拉框 然后我对下拉框进行更改的时候 第一次没问题 但是如果我在选中的下拉框中从新选择 数据就会发生变化 会保留之前选中的值 这样是不对 通过索引 每次进行更改时都会把之前选中的给替换掉
非常重要：this.attr.splice(index,1,{name , id})

    <el-dialog :title="visibleTitle" :visible.sync="dialogVisible" width="580px">
      <div>
        <el-form
          :inline="true"
          :model="formProperty"
          ref="formProperty"
          class="demo-form-inline"
          label-width="110px"
          label="left"
        >
          <el-form-item
            v-for="(domain, index) in formProperty.domains"
            :label="'属性值：' + index"
            :key="domain.key"
            :prop="'domains.' + index + '.id'"
            :rules="{required: true, message: '属性值不能为空', trigger: 'blur'}"
          >
            <el-col :span="10">
              <el-select
                v-model="domain.id"
                placeholder="请选择属性值"
                size="mini"
                @change="selectGetRole(domain.id,index)"
              >
                <el-option
                  v-for="item in domain.options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="10" style="margin-left:10px;">
              <el-input v-model="domain.id" size="mini"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button @click="addDomain" size="mini">添加新值</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formProperty')">确 定</el-button>
      </span>
    </el-dialog>

export default {
  data() {
    return {
      dialogVisible: false,
      visibleTitle: "",
      formProperty: {
        domains: [
          {
            id: "",
            name: "",
            options: [
              {
                id: "选项1",
                name: "黄金糕"
              },
              {
                id: "选项2",
                name: "双皮奶"
              },
              {
                id: "选项3",
                name: "蚵仔煎"
              },
              {
                id: "选项4",
                name: "龙须面"
              },
              {
                id: "选项5",
                name: "北京烤鸭"
              }
            ]
          }
        ]
      },
      attr: [],
    };
  },
  created() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formProperty.domains);
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addDomain() {
      this.formProperty.domains.push({
        id: "",
        name: "",
        options: [
          {
            id: "选项1",
            name: "黄金糕"
          },
          {
            id: "选项2",
            name: "双皮奶"
          },
          {
            id: "选项3",
            name: "蚵仔煎"
          },
          {
            id: "选项4",
            name: "龙须面"
          },
          {
            id: "选项5",
            name: "北京烤鸭"
          }
        ],
        key: Date.now()
      });
    },
    selectGetRole(vId,index) {
      let domains = this.formProperty.domains[0].options;
      let obj = {};
      let name = ''
      let id = ''
      obj = domains.find(item => {
        name = item.name
        id = item.id
        return item.id === vId;
      });
      //通过索引把更改之前的数据删除然后添加新的 来替代被删除的元素：
      this.attr.splice(index,1,{name , id})
      // console.log(this.attr); 
    }
  }
};

第二个下拉框第一次选中了 ‘ 双皮奶 ’

然后对第二个下拉框进行了更改选中 ‘ 北京烤鸭 ’ 然后进行了替换~ 如果不替换每次都会push进去（会把之前的也保留下来）