【Vue.js】PropSyncの使い方について

vue-property-decoratorのPropSyncで、以下のように複数の変数を1つのモデルに格納して、
子コンポーネントから親コンポーネントへ値を渡したいと考えています。
以下のような書き方をすると、実行時にエラーが出力されます。
どのようにすれば親コンポーネントへモデルを渡すことができますでしょうか？

モデル(InfoModel.ts)

export default class InfoModel {
  public personNumber: string;
  public personName: string;
  public personAge: number;

  constructor(personNumber: string, personName: string, personAge: number) {
    this.personNumber = personNumber;
    this.personName = personName;
    this.personAge = personAge;
  }
}

子コンポーネント(Child.vue)

<template>
  <div>
    <v-card>
      <v-form>
        <v-card-text>
          <v-row>
            <v-col>
              <v-text-field
                v-model="personNumber"
                label="番号"
                maxlength="3"
              />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field
                v-model="personName"
                label="名前"
                maxlength="10"
              />
            </v-col>
            <v-col cols="6">
              <v-text-field
                v-model="personAge"
                maxlength="3"
                label="年齢"
              />
            </v-col>
          </v-row>
        </v-card-text>
      </v-form>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue, PropSync } from 'vue-property-decorator';
import InfoModel from '../../InfoModel';

@Component
export default class Child extends Vue {

  private personNumber!: string;
  private personName!: string;
  private personAge!: number;

  // TODO 情報を1つのモデルに格納する。
  @PropSync('personInfomation', { type: Object, default: null })
  private infoModel: InfoModel = new InfoModel(
    this.personNumber,
    this.personName,
    this.personAge
  );
}
</script>

親コンポーネント(Parent.vue)

<template>
  <v-container>
    <v-card>
      <Child
        :person-information.sync="personInformation"
      />
    </v-card>
  </v-container>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from 'vue-property-decorator';
import InfoModel from '../../InfoModel';
import Child from '@/components/Child.vue';

@Component({
  components: {
    Child,
  },
})
export default class Parent extends Vue {
   private personInformation = new InfoModel('', '', 0);
}
</script>

実行時エラー

[Vue warn]: The computed property "infoModel" is already defined in data.

Twoshi

2021/02/05 04:28

ソースについて確認お願いいたします。・モデル(InfoModel.ts)のpersonAgeですが、integerとなっていますが、numberの間違いでしょうか？(構エラー?) ・子コンポーネント(Child.vue)のprivate personAge!: string ですが、numberの間違いでしょうか？(InfoModelと型定義が異なります。)

kara1

2021/02/05 04:51

Twoshi様、ご確認ありがとうございます。おっしゃる通り、間違いがございました。正しくはpersonAgeはnumber型となります。（本文側も修正いたします。）

Twoshi

2021/02/05 04:58

ご確認ご対応いただきありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

@PropSyncの記述箇所に誤りがありました。

正しくは以下のようになります。公式github

Vue
1@PropSync('personInformation', { type: InfoModel, default: null })
2  syncedPersonInformation!: InfoModel;

以下動作確認をしたソースになります。
ご参考になれば幸いです。(モデルは変更していないため、記載していません。)

Parent.vue

Vue
1<template>
2  <v-container>
3    <v-card>
4      <Child :person-information="personInformation" />
5    </v-card>
6  </v-container>
7</template>
8
9<script lang="ts">
10import { Component, Vue } from 'vue-property-decorator';
11import InfoModel from '../../InfoModel';
12import Child from '@/components/Child.vue';
13
14@Component({
15  components: {
16    Child
17  }
18})
19export default class Parent extends Vue {
20  public personInformation = new InfoModel('', '', 0);
21}
22</script>
23

Child.vue

Vue
1template>
2  <div>
3    <v-card>
4      <v-form>
5        <v-card-text>
6          <v-row>
7            <v-col>
8              <v-text-field
9                v-model="syncedPersonInformation.personNumber"
10                label="番号"
11                maxlength="3"
12              />
13            </v-col>
14          </v-row>
15          <v-row>
16            <v-col cols="6">
17              <v-text-field
18                v-model="syncedPersonInformation.personName"
19                label="名前"
20                maxlength="10"
21              />
22            </v-col>
23            <v-col cols="6">
24              <v-text-field
25                v-model="syncedPersonInformation.personAge"
26                maxlength="3"
27                label="年齢"
28              />
29            </v-col>
30          </v-row>
31        </v-card-text>
32      </v-form>
33    </v-card>
34  </div>
35</template>
36
37<script lang="ts">
38import { Component, Vue, PropSync } from 'vue-property-decorator';
39import InfoModel from '../../InfoModel';
40
41@Component
42export default class Child extends Vue {
43  @PropSync('personInformation', { type: InfoModel, default: null })
44  syncedPersonInformation!: InfoModel;
45}
46</script>
47