简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Vue js - Ajouter du texte et une zone déroulante à la zone de contenu HTML modifiable
P粉288069045
P粉288069045 2023-07-27 17:02:54
0
1
537
<p>J'utilise Vue.js. J'essaie d'ajouter du texte et une zone déroulante dans un div HTML modifiable. </p><p>Je souhaite ajouter une liste déroulante à l'aide d'un bouton. Cette liste déroulante peut être ajoutée n'importe où dans le texte, tout comme l'endroit où je place mon curseur. </p><p>Maintenant, cela fonctionne presque, mais je ne trouve pas de problème. </p><p>Lorsque j'entre et ajoute plusieurs listes déroulantes, puis que j'appuie sur le bouton "Obtenir le modèle de données", cela indique toujours que l'option de la liste déroulante que j'ai sélectionnée est incorrecte. Je veux dire, il montre toujours la première option. </p><p>À l'aide de ce bouton "Obtenir le modèle de données", j'essaie d'obtenir toutes les options de texte + sélection. </p><p>Voici mon code :</p><p><br /></p> <pre class="brush:php;toolbar:false;"><template> <div> <div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div> <bouton @click="addDropdown">Ajouter une liste déroulante</bouton> <bouton @click="getDataModel">Obtenir le modèle de données</bouton> <div>{{ dataModel }}</div> </div> </modèle> <script> exporter par défaut { données() { retour { contenu: '', listes déroulantes : [], dropdownOptions : ['Option 1', 'Option 2', 'Option 3'], modèle de données: '', } ; }, méthodes : { onInput(événement) { this.content = event.target.innerHTML.replace(/<div><br></div>/g, ''); }, addDropdown() { liste déroulante 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((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((liste déroulante, 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> <portée du style> .content-editable { bordure : 1px solide #ccc ; remplissage : 10 px ; hauteur minimale : 100 px ; marge inférieure : 10 px ; } </style></pre> <p><br /></p>
P粉288069045
P粉288069045

répondre à tous(1)
P粉321584263
P粉3215842632023-07-28 10:46:58 1 plancher

Vue.js est basé sur les données et adopte la pensée MVVM. Si vous souhaitez créer plusieurs balises "input", il est plus logique d'utiliser v-for au lieu de créer dynamiquement le 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>

J'espère que cela vous aidera !

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！