表单处理 Object 里的 Object

今天来看看一个常见问题。

{
  first_name: 'chris',
  last_name: 'wang',
  email: '[email protected]'
  camp: {
    name: 'web camp',
    member_count: 10
  }
}

先做已经会的

先依昨天讲的 UserForm 的 component 可以这样写。

<form @submit.prevent="$emit('submit')">
    <label>firstName<br/>
    <input type="text"
      :disabled="!$listeners['update:firstName']"
      :value="data.firstName"
      @input="$emit('update:firstName', {
        ...data,
        firstName: $event.target.value
      })">
    </label><br/>
    <label>lastName<br/>
    <input type="text"
      :disabled="!$listeners['update:lastName']"
      :value="data.lastName"
      @input="$emit('update:lastName', {
        ...data,
        lastName: $event.target.value
      })">
    </label><br/>
    <label>email<br/>
    <input type="email"
      :disabled="!$listeners['update:email']"
      :value="data.email"
      @input="$emit('update:email', {
        ...data,
        email: $event.target.value
      })">
    </label><br/>
    <pre>camp: {{data.camp}}</pre>
    <input type="submit" value="送出">
</form>

画面

还有一个 camp 怎麽办呢？

{
  // ....
  camp: {
    name: 'web camp',
    member_count: 10
  }
}

先为这个物件做一个 component

也就是以这样的视角看待它

{
  name: 'web camp',
  member_count: 10
}

有一个 camp 的视角时，依昨天教的，是不是就可以这样做

<div class="camp-fields">
  <div class="camp-fields">
    <label>
      name<br />
      <input
        type="text"
        :disabled="!$listeners['update:name']"
        :value="data.name"
        @input="
          $emit('update:name', {
            ...data,
            name: $event.target.value,
          })
        "
      />
    </label><br />
    <label>
      member_count<br />
      <input
        type="number"
        :disabled="!$listeners['update:member_count']"
        :value="data.member_count.toString()"
        @input="
          $emit('update:member_count', {
            ...data,
            member_count: Number($event.target.value),
          })
        "
      />
    </label><br />
  </div>
</div>

在此，还对 type="number" 的栏位做了转态，将资料保持在数字型别。但是显示时要转型别，从数字变成字串。

<form @submit.prevent="$emit('submit')">
    <input type="text"
      :disabled="!$listeners['update:firstName']"
      :value="data.firstName"
      @input="$emit('update:firstName', {
        ...data,
        firstName: $event.target.value
      })">
    <input type="text"
      :disabled="!$listeners['update:lastName']"
      :value="data.lastName"
      @input="$emit('update:lastName', {
        ...data,
        lastName: $event.target.value
      })">
    <input type="email"
      :disabled="!$listeners['update:email']"
      :value="data.email"
      @input="$emit('update:email', {
        ...data,
        email: $event.target.value
      })">
    <camp-form
      :data="data.camp"
      @update:name="$emit('update:camp', {
        ...data,
        camp: $event
      })"
      @update:member_count="$emit('update:camp', {
        ...data,
        camp: $event
      })"
    ></camp-form>
  <input type="submit" value="送出">
</form>

并且在 UserForm 上面加上新的 event @update:camp="$store.commit('user', $event)" 表示在此会修改 camp 这个属性。

  <UserForm
    :data="data"
    @update:firstName="$store.commit('user', $event)"
    @update:lastName="$store.commit('user', $event)"
    @update:email="$store.commit('user', $event)"
    @update:camp="$store.commit('user', $event)"
    @submit="onSubmit"
  ></UserForm>

在此有一个有趣的比较

为方便抓到重点，我把不必要的 type="text" 先拿掉，因为它是预设值，也把 disabled 拿掉因为要不要这个属性，是看需求，不是设计的重点。(只是符合需求时，这样做很符合语意)

<input
  :value="data.firstName"
  @input="$emit('update:firstName', {
    ...data,
    firstName: $event.target.value
  })"
>

跟下面的 form 做一个对比。

<camp-form
  :data="data.camp"
  @update:name="$emit('update:camp', {
    ...data,
    camp: $event
  })"
  @update:member_count="$emit('update:camp', {
    ...data,
    camp: $event
  })"
></camp-form>