Vue.js を使用しています。編集可能な HTML div にテキストとドロップダウン ボックスを追加しようとしています。

ボタンを使用してドロップダウンボックスを追加したいと考えています。このドロップダウン ボックスは、カーソルを置いた場所と同じように、テキスト内のどこにでも追加できます。

これでほぼ動作するようになりましたが、問題は見つかりません。

複数のドロップダウン ボックスを入力して追加し、[データ モデルの取得] ボタンを押すと、選択したドロップダウン ボックス オプションが正しくないことが常に表示されます。つまり、常に最初のオプションが表示されます。

この [データ モデルの取得] ボタンを使用して、選択されているすべてのテキスト オプションを取得しようとしています。

これが私のコードです:

<テンプレート> 
 
 ドロップダウンを追加 データ モデルを取得 
{{ dataModel }}
 
  <スクリプト> デフォルトのエクスポート { データ（） { 戻る { コンテンツ： ''、 ドロップダウン: []、 ドロップダウンオプション: ['オプション 1', 'オプション 2', 'オプション 3'], データ・モデル： ''、 }; }、 メソッド: { onInput(イベント) { this.content = events.target.innerHTML.replace(/

/g, ''); }、 addDropdown() { const ドロップダウン = { selectedOption: this.dropdownOptions[0], }; this.dropdowns.push(ドロップダウン); const editableDiv = this.$refs.contentEditable; const dropdownSelect = document.createElement('select'); ドロップダウン選択.style.width = '100px'; this.dropdownOptions.forEach((オプション) => { const dropdownOption = document.createElement('オプション'); ドロップダウンオプション.値 = オプション; ドロップダウンオプション.テキスト = オプション; ドロップダウン選択.appendChild(ドロップダウンオプション); }); editableDiv.appendChild(dropdownSelect); }、 getDataModel() { const editableDiv = this.$refs.contentEditable; const clonedDiv = editableDiv.cloneNode(true); const selectElements = clonedDiv.querySelectorAll('select'); this.dropdowns.forEach((ドロップダウン, インデックス) => { const selectedOption = ドロップダウン.selectedOption; const selectedOptionText = Array.from(selectElements[index].options).find((option) =>option.value === selectedOption)?.text; const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`); selectElements[インデックス].replaceWith(selectedOptionTextNode); }); this.dataModel = clonedDiv.textContent; }、 }、 };  <スタイルスコープ> .content-editable { 境界線: 1px 実線 #ccc; パディング: 10px; 最小高さ: 100px; マージン-ボトム: 10px; }