Modo corretto per ripristinare i dati di una finestra modale come predefinita se il modale viene chiuso utilizzando Vue.js?

Question

Ho una proprietà chiamata addServerWindowche è impostata su false per impostazione predefinita. Se addServerWindowè falso, divviene visualizzato a che viene impostato addServerWindowsu vero quando viene cliccato. Una volta addServerWindowè vero, una divche contiene un formè resa che ha alcuni dati 2 vie ingressi binded. Infine, c'è uno schermo nero posizionato in modo assoluto divche si imposta addServerWindowsu false quando viene cliccato.

Ora sono curioso, qual è il modo migliore per ripristinare i dati della finestra modale quando viene chiusa tramite un clic sullo schermo nero. In questo momento, se un utente apre la finestra modale, digita qualcosa nell'input, chiude il modale e quindi apre di nuovo il modale, il modale ricorda ciò che l'utente aveva digitato in precedenza. Vorrei reimpostare i dati modali se l'utente fa clic sulla schermata nera.

Potrei creare una funzione in cui potrei codificare tutte le proprietà e impostarle sui valori predefiniti ma non sono abbastanza sicuro che questo sia il modo corretto

Parte del mio modello:

<div class='add-server' @click='addServerWindow = true'></div>

<div class="create-server-form-container" v-if='addServerWindow'>
    <form class="create-server-form" @submit='createServer($event)'>
        <div class="inputs-container">
            <div class="input-container">
                <label class='text-input-label' :for="serverName">server name</label>
                <input type="text" v-model="serverName" placeholder="Enter a server name">
            </div>
        </div>
        <div class="button-container">
            <button type="submit" name="button">Create</button>
        </div>
    </form>
    <div class="black-screen" @click='addServerWindow = false'></div>
</div>

I dati dello script:

    data(){
    return {
        addServerWindow: false,
        serverName: ''
    }
},

Answer 1

Bobimaru. Preferirei fare una funzione che alterna addServerWindow e cancella il serverName allo stesso tempo.

methods:{
    toggleServerForm(){
       this.addServerWindow = !this.addServerWindow
       this.serverName = ''
    }
}