Vue js - 編集可能な HTML コンテンツ ボックスにテキストとドロップダウン ボックスを追加します

Question

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

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

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

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

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

これが私のコードです:

<テンプレート>
  <div>
    <div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div>
    <button @click="addDropdown">ドロップダウンを追加</button>
    <button @click="getDataModel">データ モデルを取得</button>
    <div>{{ dataModel }}</div>
  </div>
</テンプレート>

<スクリプト>
デフォルトのエクスポート {
  データ（） {
    戻る {
      コンテンツ： ''、
      ドロップダウン: []、
      ドロップダウンオプション: ['オプション 1', 'オプション 2', 'オプション 3'],
      データ・モデル： ''、
    };
  }、
  メソッド: {
    onInput(イベント) {
      this.content = events.target.innerHTML.replace(/<div><br></div>/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;
}
</style>

Answer 1

Vue.js はデータ駆動型であり、MVVM の考え方を採用しています。複数の「input」タグを作成する場合は、DOM を動的に作成する代わりに v-for を使用する方が合理的です。

リーリー ＃＃＃お役に立てれば！