Vue js - 편집 가능한 HTML 콘텐츠 상자에 텍스트 및 드롭다운 상자 추가

Question

<p>저는 Vue.js를 사용하고 있습니다. 편집 가능한 HTML div에 텍스트와 드롭다운 상자를 추가하려고 합니다. </p><p>버튼을 사용하여 드롭다운 상자를 추가하고 싶습니다. 이 드롭다운 상자는 커서를 놓은 위치처럼 텍스트의 어느 곳에나 추가할 수 있습니다. </p><p>이제 거의 작동하지만 문제를 찾을 수 없습니다. </p><p>여러 개의 드롭다운 상자를 입력하고 추가한 다음 "데이터 모델 가져오기" 버튼을 누르면 항상 내가 선택한 드롭다운 상자 옵션이 올바르지 않다고 표시됩니다. 내 말은 항상 첫 번째 옵션이 표시된다는 뜻입니다.

이 "데이터 모델 가져오기" 버튼을 사용하여 모든 텍스트+선택 옵션을 가져오려고 합니다. </p><p>내 코드는 다음과 같습니다.</p><p><br /></p> <pre class="brush:php;toolbar:false;"><템플릿> <div> <div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div> <button @click="addDropdown">드롭다운 추가</button> <button @click="getDataModel">데이터 모델 가져오기</button> <div>{{ 데이터모델 }}</div> </div> </템플릿> <스크립트> 기본값 내보내기 { 데이터() { 반품 { 콘텐츠: '', 드롭다운: [], dropdownOptions: ['옵션 1', '옵션 2', '옵션 3'], 데이터모델: '', }; }, 방법: { onInput(이벤트) { this.content = event.target.innerHTML.replace(/<div><br></div>/g, ''); }, addDropdown() { const 드롭다운 = { 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((옵션) => { const dropdownOption = document.createElement('option'); dropdownOption.value = 옵션; dropdownOption.text = 옵션; 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.value === selectedOption)?.text; const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`); selectElements[index].replaceWith(selectedOptionTextNode); }); this.dataModel = clonedDiv.textContent; }, }, }; </스크립트> <스타일 범위> .내용 편집 가능 { 테두리: 1px 실선 #ccc; 패딩: 10px; 최소 높이: 100px; 여백 하단: 10px; } <p><br /></p>

Answer 1

Vue.js는 데이터 기반이며 MVVM 사고를 채택합니다. 여러 개의 "입력" 태그를 생성하려는 경우 DOM을 동적으로 생성하는 대신 v-for를 사용하는 것이 더 합리적입니다.

으아아아

도움이 되기를 바랍니다!