How to make an edit box in Vue?

Question

Vue.js

Hello dear experts. The task is to display a modal window with information about the user when clicking on a table element. The input values ​​are bound using the v-model directive, so my question is how to make the values ​​in the table not change when the modal window is closed, but only change when the button is clicked?

<template>
<div>
  <b-modal id="modal-1" title="Выбран пользователь" cancel-title='Назад' ok-title="Добавить пользователя" ok-variant='success'  >
    <p class="my-4"> <span><b>Name:</b></span>  <input type="text" class="form-control" placeholder="Name"  v-model="singleUser.name" > </p>
     <p class="my-4"> <span><b>Username:</b></span>  <input type="text" class="form-control" placeholder="Username"  v-model="singleUser.username"> </p>
       <p class="my-4"> <span><b>Phone:</b></span>  <input type="text" class="form-control" placeholder="Phone"  v-model="singleUser.phone"> </p>       
  </b-modal>
</div>
</template><img src="https://habrastorage.org/webt/5d/ee/58/5dee58a7d80af113646403.png" alt="image"/>

Answer 1

Use separate data fields for the modal state, and when opening / closing, synchronize with the main ones