suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Vue js – Fügen Sie Text und Dropdown-Feld zum bearbeitbaren HTML-Inhaltsfeld hinzu

<p>Ich verwende Vue.js. Ich versuche, Text und ein Dropdown-Feld in ein bearbeitbares HTML-Div einzufügen. </p><p>Ich möchte über eine Schaltfläche ein Dropdown-Feld hinzufügen. Dieses Dropdown-Feld kann an einer beliebigen Stelle im Text eingefügt werden, genau wie dort, wo ich meinen Cursor platziere. </p><p>Jetzt funktioniert es fast, aber ich kann kein Problem finden. </p><p>Wenn ich mehrere Dropdown-Boxen eingebe und hinzufüge und dann auf die Schaltfläche „Datenmodell abrufen“ klicke, wird immer angezeigt, dass die von mir ausgewählte Dropdown-Box-Option falsch ist. Ich meine, es zeigt immer die erste Option. </p><p>Mit dieser Schaltfläche „Datenmodell abrufen“ versuche ich, alle Text- und Auswahloptionen abzurufen. </p><p>Hier ist mein Code:</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">Dropdown hinzufügen</button> <button @click="getDataModel">Datenmodell abrufen</button> <div>{{ dataModel }}</div> </div> </template> <script> Standard exportieren { Daten() { zurückkehren { Inhalt: '', Dropdown-Listen: [], dropdownOptions: ['Option 1', 'Option 2', 'Option 3'], Datenmodell: '', }; }, Methoden: { 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> <Stilbereich> .content-editable { Rand: 1px fest #ccc; Polsterung: 10px; Mindesthöhe: 100 Pixel; Rand unten: 10px; } </style></pre> <p><br /></p>
P粉288069045P粉288069045512 Tage vor574

Antworte allen(1)Ich werde antworten

  • P粉321584263

    P粉3215842632023-07-28 10:46:58

    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>

    希望能帮到你！

    Antwort
    0
  • StornierenAntwort