37、使用 Vue.js 开发区块链客户端

使用 Vue.js 开发区块链客户端

1. TransactionForm 展示组件

TransactionForm 组件允许用户输入交易发送者、接收者的姓名以及交易金额。当用户点击 “ADD TRANSACTION” 按钮时，这些信息会被发送到父组件 App。该按钮在表单填写完整后才会启用。

以下是顶级 App 组件模板中使用 TransactionForm 的方式：

<transaction-form
  :disabled="shouldDisableForm()"
  @add-transaction="addTransaction">
</transaction-form>

TransactionForm 组件的模板如下：

<template>
  <div>
    <h2>New transaction</h2>
    <form class="add-transaction-form"
      @submit.prevent="handleFormSubmit">
      <input
        type="text"
        name="sender"
        placeholder="Sender"
        autoComplete="off"
        v-model.trim="formValue.sender"
        :disabled="di