フォームへのデータ反映がエラーになる

Question

前提・実現したいこと

Vue.jsを利用して、蔵書管理アプリを作成しています。
本来であれば入力したデータは登録ボタンを押すと保存されるはずなのですが、ローカルストレージに反映されずにおります。
入力データを表示させるには、どのように値を定義したらいいのでしょうか？
エラーメッセージは下記の通りです。

発生している問題・エラーメッセージ

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot set properties of undefined (setting 'shape')"

found in

---> <BookForm> at src/components/BookForm.vue
       <App> at src/App.vue
         <Root>

TypeError: Cannot set properties of undefined (setting 'shape')

該当のソースコード

<template>
<div id="form">
  <!-- 選択中の書籍を表示 -->
  <BookInfo :book="book"></BookInfo>
  <!-- レビュー入力のためのフォームを準備 -->
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="読書状況" prop="status">
      <el-radio-group v-model="form.status">
        <el-radio label="購入前">購入前</el-radio>
        <el-radio label="購入後">購入後</el-radio>
        <el-radio label="読了済">読了済</el-radio>
        <el-radio label="その他">その他</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="書籍の形">
      <el-checkbox-group v-model="form.shape">
        <el-checkbox label="紙の書籍">紙の書籍</el-checkbox>
        <el-checkbox label="電子書籍">電子書籍</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="読了日">
      <el-date-picker type="date" v-model="form.read"></el-date-picker>
    </el-form-item>
    <el-form-item label="コメント">
      <el-input type="textarea" size="large" v-model="form.comment"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onsubmit">登録</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import BookInfo from './BookInfo.vue'
import { UPDATE_CURRENT, UPDATE_BOOK } from '../store/mutation-types'

export default {
  name: 'book-form',
  // ローカルコンポーネントを登録
  components: {
    BookInfo
  },
  data() {
    return {
      book: {}, // 選択中の書籍
      form: { // フォームの内容
        status: '', // 読書状況
        shape: [], // 書籍の形
        read: '', // 読了日
        comment: '' // コメント
      },
      rules: {
        status: [
          { required: true, message: '読書状況が未選択です', trigger: 'change' }
        ]
      }
    }
  },
  computed: mapGetters([ 'current', 'getBookById' ]),
  // ページロード時の処理
  created() {
    // 選択中の書籍がない場合、トップページにリダイレクト
    if(!this.current) {
      this.$router.push('/')
    }
    // 選択中の書籍をbookプロパティに詰め替え
    this.book = Object.assign({}, this.current)
  },
  mounted() {
    // 選択中の書籍でストア内の情報を検索
    let b = this.getBookById(this.book.id)
    // 既にレビューが存在する場合は、その内容をフォームに反映
    if(b) {
      this.form.status = b.status
      this.from.shape = b.shape
      this.form.read = b.read
      this.form.comment = b.comment
    }
  },
  methods: {
    // アクションとメソッドとを紐付け
    ...mapActions([UPDATE_BOOK, UPDATE_CURRENT]),
    // [登録]ボタンでデータを登録
    onsubmit() {
      // 入力値の検証を実行
      this.$refs['form'].validate((valid) => {
        // 検証に成功したらストアにも反映
        if(valid) {
          this[UPDATE_BOOK](
            Object.assign({}, this.book, this.form)
          )
          // 選択中の書籍をクリア
          this[UPDATE_CURRENT](null)
          // 処理成功の通知メッセージを表示
          this.$notify({
            title: '蔵書メーター',
            message: this.$createElement('p', { style: 'color: #009' }, '蔵書データの登録／更新に成功しました。'),
            duration: 2000
          })
          // フォームの内容をクリア
          this.form.status = ''
          this.from.shape = []
          this.form.read = ''
          this.form.comment = ''
          // トップページにリダイレクト
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

試したこと

this.from.shape = b.shape
上記一文を削除するとエラーメッセージがなくなるため、原因はここであると考えています。
ですが、どのように修正したらよいのかが分かりません。

補足情報（FW/ツールのバージョンなど）

vue：2.6.14
vue cli：4.5.15

Comments

[surface_0]

なんか質問のタイトルと内容が一致してない気がするのですが…

[退会済みユーザー]

エラーメッセージの内容がshapeが未定義であるというものだったため、記述方法が誤っているのかと考えたため、どのように修正したら定義できるのだろうかと標題にしました。
どのような質問タイトルだとよかったでしょうか？

[surface_0]

タイトルではcheckboxの値の定義についてとなっていますが、
本文だとデータが保存できないという方に焦点が当たっていて、
checkboxについては具体的に触れられていないので主題が異なっているなと思いました。
結果論で言えばどちらにも起因するものではありませんでしたが…
例えば『フォームへのデータ反映がエラーになる』とかが良いのではと思います。

[退会済みユーザー]

ありがとうございます。
確かに言われてみればその通りですね。shapeはcheckboxから取得する値だったので、そちらの方に意識が向いていました。
タイトル修正しました！

[surface_0]

お手数おかけしましたm(__)m

Answer 1

this.from.shape = b.shape

上記一文を削除するとエラーメッセージがなくなるため、原因はここであると考えています。

単純にformがfromになってるスペルミスだと思います。

Comments

[退会済みユーザー]

入力ミスにまったく気付けていませんでした。。。

無事、期待する挙動になりました。ありがとうございます！