Me gustaría agregar un código HTML a mi página cuando se hace clic en un botón, esto es lo que me gustaría agregar
<form action="#" id="Reactie_form"> <input id="Form_voornaam" type="text" placeholder="Voornaam" style="width: 50%"> <br> <input id="Form_achternaam" type="text" placeholder="Achternaam" style="width: 50%"><br> <input id="Form_email" type="email" placeholder="E-mail" style="width: 50%"> <textarea id="Form_bericht" style="width: 100%"></textarea> <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif"> <input type="button" class="sendButt" value="Verstuur" @click="submitReactie"> </form> <span v-if="!files || !files.length"></span> <ul v-else> <li v-for="files in files" :key="files.name">{{ files.name }}</li> </ul>Gracias
Veo que estás usando VueJS. ¡Esto hace que algo así sea fácil!
Como lo haría es de la siguiente manera:
agregue lo siguiente a sus data() : isClicked: false
envuelva su código en un contenedor como este:
<div v-if='isClicked'> <form action="#" id="Reactie_form"> <input id="Form_voornaam" type="text" placeholder="Voornaam" style="width: 50%"> <br> <input id="Form_achternaam" type="text" placeholder="Achternaam" style="width: 50%"><br> <input id="Form_email" type="email" placeholder="E-mail" style="width: 50%"> <textarea id="Form_bericht" style="width: 100%"></textarea> <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif"> <input type="button" class="sendButt" value="Verstuur" @click="submitReactie"> </form> <span v-if="!files || !files.length"></span> <ul v-else> <li v-for="files in files" :key="files.name">{{ files.name }}</li> </ul> </div> y en lo siguiente a su botón: <button @click='isClicked = true'>
Envuelva su código y agregue el contenedor contenedor como una clase oculta. luego puede obtener el evento de clic y alternar el css por javascript.