Vue js - 在可編輯的 HTML 內容框中新增文字和下拉框
<p>我正在使用Vue.js。我試圖在可編輯的HTML div中新增文字和下拉方塊。 </p><p>我想要使用一個按鈕來新增下拉框。這個下拉框可以添加到文字的任何位置，就像我放置遊標的位置一樣。 </p><p>現在，它幾乎可以工作，但我找不到一個問題。 </p><p>當我輸入並新增多個下拉框，然後按下「取得資料模型」按鈕時，它總是顯示我選擇的下拉框選項不正確。我的意思是它總是顯示第一個選項。 </p><p>使用這個「取得資料模型」按鈕，我試著取得所有的文字 選擇選項。 </p><p>以下是我的程式碼：</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><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， ''）;
},
新增下拉式選單（）{
常數下拉選單 = {
selectedOption: this.dropdownOptions[0],
};
this.dropdowns.push(下拉);
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);
},
取得資料模型（）{
const editableDiv = this.$refs.contentEditable;
const clonedDiv = editableDiv.cloneNode(true);
const selectElements = clonedDiv.querySelectorAll('select');
this.dropdowns.forEach((dropdown, 索引) => {
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 = 克隆的Div.textContent;
},
},
};
</腳本>
<樣式範圍>
.內容可編輯{
邊框：1px實心#ccc；
內邊距：10px；
最小高度：100px；
底部邊距：10px；
}
</風格></pre>
<p><br />></p>
