如何使引导模式窗口在vuejs中可重用

Question

我正在尝试创建一个引导模式窗口，以便在执行操作之前向用户提供某种警告。 当我填写文本字段，关闭窗口并重新打开它时，之前的值仍然显示。 我怎样才能使文本字段成为必填字段，一旦我关闭模态窗口，文本字段就会清除，同时显然将值存储在＆＃34; reason＆＃34;中。 任何帮助将不胜感激！

这是我的vuejs代码：

＆＃13;

＆＃13;

<div class="modal fade" id="reject" role="dialog">
		    <div class="modal-dialog modal-sm">
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">&times;</button>
		          <h4 class="modal-title">Loan Rejection</h4>
		        </div>
		        <div class="modal-body">
		          <p>Are you sure you want to reject this loan request?</p>
              
		          <div class="form-group">
		            <label>Reason: </label>
		            <input v-model="reason" class="form-control" placeholder="Enter your reason">
		          </div>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-danger" data-dismiss="modal" v-show="reason" @click="clearbox">Reject</button>
		        </div>
		      </div>
		    </div>
		</div>

	</div>
</template>

<script type="text/javascript">
	export default {
		data () {
			return {
				loanRequest: '',
        reason: ''
			}
		},
    methods: {
      clearbox (){
        reason: ''
      }
    },
		created () {
			this.$http.get('http://localhost:9000/api/loans/hrvalidation')
			.then(
				response => {
					this.loanRequest = response.body
				})
			.catch(function(error){
				console.log(error)
			})
		}
	}
</script>

＆＃13;

＆＃13;

＆＃13;