Vue.jsを使用してモーダルが閉じられている場合に、モーダルウィンドウのデータをデフォルトにリセットする正しい方法はありますか？

Question

addServerWindowデフォルトでfalseに設定されているというプロパティがあります。addServerWindowfalseの場合、adivがレンダリングされaddServerWindow、クリックするとtrueに設定されます。一度addServerWindow、真でdiv含まれているformデータが入力をバインドさ、いくつかの2つの方法があり、そのレンダリングされます。最後に、絶対に配置された黒い画面がdivありaddServerWindow、クリックするとfalseに設定されます。

今、私は興味があります。黒い画面をクリックして閉じたときにモーダルウィンドウのデータをリセットするための最良の方法は何ですか。現在、ユーザーがモーダルウィンドウを開き、入力に何かを入力し、モーダルを閉じてから再びモーダルを開くと、モーダルはユーザーが以前に入力した内容を記憶します。ユーザーが黒い画面をクリックした場合、モーダルデータをリセットしたいのですが。

すべてのプロパティをハードコーディングしてデフォルトに設定できる関数を作成できましたが、これが正しい方法かどうかはよくわかりません。

私のテンプレートの一部：

<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>

スクリプトのデータ：

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

Answer 1

ボビマル。addServerWindowを切り替え、同時にserverNameをクリアする関数を実行したいと思います。

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