つながりを開発するブログ

Vueで再帰的コンポーネントの描画がminimize: true時に行われない場合の対応

2021/05/07
By kuwata chikara
typescript,vue

Vueを用いた開発で、下記のような再帰的な構成のコンポーネントを作成したところ、productionモードにしてminimize: trueにした場合、入れ子になったコンポーネントの描画が行われないという問題が発生した。

<template>
  <rec-component>
      ....
      <div v-if="...">
          <rec-component ...>
          </rec-component>
      </div>
  </rec-component>
</template>
@Component()
export default class RecComponent extends Vue {
    // ....
}

これはComponentにnameが指定されていないことが原因だったようで、nameを指定することで期待通りの動作となった。

@Component({ name: 'rec-component' })
export default class RecComponent extends Vue {
    // ....
}
タイトルとURLをコピーしました