我正在使用Vue.js。我试图在可编辑的HTML div中添加文本和下拉框。

我想要使用一个按钮来添加下拉框。这个下拉框可以添加到文本的任何位置，就像我放置光标的位置一样。

现在，它几乎可以工作，但我找不到一个问题。

当我输入并添加多个下拉框，然后按下“获取数据模型”按钮时，它总是显示我选择的下拉框选项不正确。我的意思是它总是显示第一个选项。

使用这个“获取数据模型”按钮，我试图获取所有的文本+选择选项。

以下是我的代码：

<template>
  <div>
    <div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div>
    <button @click="addDropdown">Add Dropdown</button>
    <button @click="getDataModel">Get Data Model</button>
    <div>{{ dataModel }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      dropdowns: [],
      dropdownOptions: ['Option 1', 'Option 2', 'Option 3'],
      dataModel: '',
    };
  },
  methods: {
    onInput(event) {
      this.content = event.target.innerHTML.replace(/<div><br></div>/g, '');
    },
    addDropdown() {
      const dropdown = {
        selectedOption: this.dropdownOptions[0],
      };
      this.dropdowns.push(dropdown);
      const editableDiv = this.$refs.contentEditable;
      const dropdownSelect = document.createElement('select');
      dropdownSelect.style.width = '100px';

      this.dropdownOptions.forEach((option) => {
        const dropdownOption = document.createElement('option');
        dropdownOption.value = option;
        dropdownOption.text = option;
        dropdownSelect.appendChild(dropdownOption);
      });

      editableDiv.appendChild(dropdownSelect);
    },
    getDataModel() {
      const editableDiv = this.$refs.contentEditable;
      const clonedDiv = editableDiv.cloneNode(true);
      const selectElements = clonedDiv.querySelectorAll('select');

      this.dropdowns.forEach((dropdown, index) => {
        const selectedOption = dropdown.selectedOption;
        const selectedOptionText = Array.from(selectElements[index].options).find((option) => option.value === selectedOption)?.text;

        const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`);
        selectElements[index].replaceWith(selectedOptionTextNode);
      });

      this.dataModel = clonedDiv.textContent;
    },
  },
};
</script>

<style scoped>
.content-editable {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
  margin-bottom: 10px;
}
</style>