Saya menggunakan Vue.js. Saya cuba menambah teks dan kotak lungsur turun dalam div HTML yang boleh diedit.

Saya mahu menambah kotak lungsur turun menggunakan butang. Kotak lungsur ini boleh ditambah di mana-mana dalam teks, sama seperti tempat saya meletakkan kursor saya.

Sekarang, ia hampir berfungsi, tetapi saya tidak menemui masalah.

Apabila saya memasukkan dan menambah berbilang kotak lungsur dan kemudian menekan butang "Dapatkan Model Data", ia sentiasa menunjukkan bahawa pilihan kotak lungsur yang saya pilih adalah salah. Maksud saya ia sentiasa menunjukkan pilihan pertama.

Menggunakan butang "Dapatkan Model Data" ini, saya cuba mendapatkan semua pilihan teks+pilihan.

Berikut ialah kod saya:

  eksport lalai { data() { kembali { kandungan: '', lungsur turun: [], Pilihan jatuh turun: ['Pilihan 1', 'Pilihan 2', 'Pilihan 3'], Model data: '', }; }, kaedah: { onInput(event) { this.content = event.target.innerHTML.replace(/

/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 = pilihan; dropdownOption.text = pilihan; 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; }, }, };   .content-editable { sempadan: 1px pepejal #ccc; padding: 10px; ketinggian min: 100px; margin-bawah: 10px; }