在vue2中实现一个由es6的map实现的发布任务页遇到的问题

vue2 + vant + es6 Map

data

issueDetailMap: new Map([
  [
    "主题分类",
    {
      title: "主题分类",
      value: { text: "", value: "" },
      showPicker: false,
      columns: [],
      english: "typeId",
      msg: "请选择主题分类",
    },
  ],
  [
    "主题名称",
    {
      title: "主题名称",
      value: "",
      english: "title",
      msg: "请填写主题名称",
    },
  ],
]),

template

<van-field
  v-model="issueDetailMap.get('主题分类').value.text"
  label="主题分类"
  class="field-top"
  placeholder="请选择培训类型"
  input-align="right"
  readonly
  clickable
  @click="updateFieldText(true, '主题分类', 'showPicker')"
  required
/>
<van-popup
  v-model="issueDetailMap.get('主题分类').showPicker"
  round
  position="bottom"
  :close-on-click-overlay="false"
>
  <van-picker
    show-toolbar
    :columns="issueDetailMap.get('主题分类').columns"
    @cancel="updateFieldText(false, '主题名称', 'showPicker')"
    @confirm="
      handlePickerConfirm($event, issueDetailMap.get('主题分类'))
    "
  />
</van-popup>
<van-field
  v-model="issueDetailMap.get('主题名称').value"
  label="主题名称"
  placeholder="请填写主题名称"
  input-align="right"
  required
  @input="updateFieldText($event, '主题名称', 'value')"
/>

methods

updateFieldText(value, name, key) {
  let obj = JSON.parse(JSON.stringify(this.issueDetailMap.get(name)));
  if (name == "主题分类") {
      obj[key] = value;
  } else {
    obj[key] = value;
  }
  this.issueDetailMap.set(name, obj);
  this.$forceUpdate();
},

遇到的问题

1. 通过data中的map集合：issueDetailMap渲染dom--可以渲染
2. 遇到的问题：不会动态渲染已改变的值
3. 需要手动更新this.$forceUpdate()
4. 使用起来比较麻烦，数据不多使用原始方法更遍历
5. 提交时需要遍历将map集合中的值转成正常的object

好处

1. 方便增加数据，eg：现在我要在发布页做添加一个主题内容，可以直接在data中的issueDetailMap，直接添加一个键值对
2. 方便准确操作数据，不在需要输入english，直接通过map的get方法获取数据
3. 算是一个加强个人实践的一种方法

vue2中存在该问题，vue3没试过，大概率不存在