vue循环绑定值问题？

Question

如何更好绑定el-select选择完后的值？现在弄了很多数组，有问题

<!-- tinymc富文本 -->
<template>
  <div>
    <div class="form-row">
      <div v-for="(labelText, index) in extractedLabels" :key="index" class="form-item">
        <div class="form-item">
          <label>{{ labelText }}:</label>
          <el-select v-model="selectedOptions[index]" placeholder="选择输入框类型" style="width:70px;">
            <el-option label="输入" value="input"></el-option>
            <el-option label="日期" value="date"></el-option>
            <el-option label="字典" value="dictionary"></el-option>
            <el-option label="区域" value="area"></el-option>
          </el-select>
          <div style="width:160px;">
            <div v-if="selectedOptions[index] === 'input'">
              <el-input v-model="inputValues[index]" type="text"></el-input>
            </div>
            <div v-else-if="selectedOptions[index] === 'date'">
              <el-date-picker v-model="dateValues[index]" type="date"  format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </div>
            <div v-else-if="selectedOptions[index] === 'dictionary'" class="form-select">
              <!--字典key value-->
              <el-select v-model="dictionary[index]" style="width:130px;" @change="selectChange">
                <el-option v-for="item in dictionaryOptions" :label="item.dictValue" :value="item.dictKey"></el-option>
              </el-select>
              <el-select v-model="dictionaryValues[index]" style="width:130px;">
                <el-option v-for="item in dictionaryValuesOptions" :label="item.dictValue" :value="item.dictKey"></el-option>
              </el-select>   
            </div>
            <div v-else-if="selectedOptions[index] === 'area'">
              <el-input type="textarea" v-model="areaValues[index]"></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Editor :id="tinymceId" :init="init" v-model="myValue" :disabled="disabled" @onClick="onClick">
    </Editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import 'tinymce/plugins/table'
import "tinymce/plugins/lists";
import "tinymce/plugins/textcolor";
import "@/i18n/tinymce/zh_CN.js"
import "tinymce/icons/default"; // 图标 -解决测试环境找不icon问题
export default {
  name: "tinymce",
  components: {
    Editor,
  },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      //初始化配置
      init: {
        height: 500,
        plugins: 'lists table textcolor',
        skin_url: process.env.NODE_ENV === 'development' ? "http://localhost:6004" : `${window.location.origin}/web-child-msg`,
        branding: true,
        menubar: false,
        resize: true,
        setup: (editor) => {
          editor.on('input', () => {
            this.handleInput(editor.getContent());
          })
        },
        language: 'zh_CN',
        toolbar: 'bold italic forecolor | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | table',

      },
      extractedLabels: [],
      selectedOption: [],
      selectedOptions: [],
      inputValues: [],
      dateValues: [],
      dictionary: [],
      dictionaryValues: [],
      dictionaryOptions: [],
      dictionaryValuesOptions: [],
      areaValues: [],
      myValue: this.value,
    }
  },
  mounted() {
    tinymce.init({})
    this.getSelectData("Msg_task_dict")
  },
  methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    onClick(e) {
      console.log("e", e)
      // this.$emit("onClick", e, tinymce);
    },
    clear() {
      this.myValue = ""
    },
    handleInput(content) {
      const regex = /\{(.*?)\}/g;
      this.extractedLabels = content.match(regex) || []
      this.extractedLabels = this.extractedLabels.map(label => label.substring(1, label.length - 1))
    },
    selectChange(val) {
      console.log("获取dictval",val)
      this.getSelectData(val,1)
    },
    getSelectData(code,secend) {
      this.$myHttp({
        method: "POST",
        url: this.$store.state.user.prefix + "/sys/sysDict/getAllDictItem",
        data: {
          where: [
              {
                  "field": "code",
                  "opt": "eq",
                  "value": code,
                  "assemble": "and"
              }
          ],
          pageNum: 1,
          pageSize: 1000,
        },
      }).then((res) => {
        if (res.success) {
          if(secend){
            this.dictionaryValuesOptions = res.data.rows
            return
          }
          this.dictionaryOptions = res.data.rows
        }
      })
    }
  },
  watch: {
    myValue(newValue) {
      this.$emit("input", newValue);
     // console.log(newValue)
    },
    //对应接口select
    extractedLabels(newVal,oldVal) {
     if(newVal.length>oldVal.length){
      this.selectedOptions.push("input")
      this.inputValues.push("")
      this.dateValues.push("")
      this.inputValues.push("")
      this.dateValues.push("")
      this.dictionary.push("")
      this.dictionaryValues.push("")
      this.dictionaryOptions.push("")
      this.dictionaryValuesOptions.push("")
      this.areaValues.push("")
      console.log( this.selectedOptions,this.inputValues,this.dateValues)
     }
     // console.log(newValue)
      //console.log(this.inputValues)
    },
  }
}
</script>
<style lang="less">
.form-row {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素自动换行 */
}

.form-item {
  flex: 1 0 33.33%;
  /* 每行显示三个元素 */
  //justify-content: ;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 9px 0 9px 0;
}

/* 清除第一个元素的左边距 */
.form-item:first-child {
  margin-left: 0;
}

label {
  display: flex;
  align-items: center;
}

.form-select {
  width: 260px;
  display: flex;
}
</style>