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, '');
},
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 = option;
dropdownOption.text = option;
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;
},
},
};
</script>
<style scoped>
.content-editable {
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
margin-bottom: 10px;
}
</style></pre>
<p><br /></p>
1
920
收藏
Vue.js是数据驱动的，采用MVVM思想。如果您想创建多个“input”标签，请使用v-for更合理，而不是动态创建DOM。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style scoped> .content-editable { border: 1px solid #ccc; padding: 10px; min-height: 100px; margin-bottom: 10px; } </style> </head> <body> <div id="app"> <template> <div> <button @click="addDropdown">creatSelect</button> <div v-for="(dropdown, index) in dropdowns" :key="index"> <select v-model="dropdown.selectedValue"> <option v-for="option in dropdown.options" :value="option.value" :key="option.value">{{ option.label }}</option> </select> </div> </div> <button @click="getAllSelectedValues">getValue：</button> <div>valueList：{{ allSelectedValues }}</div> </template> </div> </body> </html> <script> var app = new Vue({ el: '#app', data: { dropdowns: [], dropdownOptions: [ { value: 'option1', label: 'option1' }, { value: 'option2', label: 'option2' }, { value: 'option3', label: 'option3' }, { value: 'option4', label: 'option4' }, ], allSelectedValues: [], }, methods: { addDropdown() { this.dropdowns.push({ selectedValue: null, options: this.dropdownOptions, }); }, getAllSelectedValues() { this.allSelectedValues = this.dropdowns.map((dropdown) => dropdown.selectedValue); }, }, }) </script>希望能帮到你！