[FlexGrid] Provide/Injectで値を参照しているコンポーネントをセルテンプレート配下に配置するとスクリプトエラーが発生する – MESCIUS ナレッジベース

作成日: 2022/03/25 最終更新日: 2022/03/25

文書種別

制限事項

状況

回避方法あり

詳細

Provide/Injectを利用して、Injectで値を参照しているコンポーネントをセルテンプレート配下に配置すると以下のスクリプトエラーが発生します。

TypeError: Cannot read properties of undefined (reading 'XXX')

回避方法

injectで参照するオブジェクトをcomponentのprosに変換して利用します。

//子コンポーネント
export default defineComponent({
  // setup() {
  // const store = inject('store');
  // return { store };
  // },
  // 回避方法
  props: ['store'],
  setup(props) {
    const store = props.store || inject('store');
    return { store };
  },
});

//親コンポーネント
<template>
  ・・・省略・・・
    <wj-flex-grid :items-source="items">
      <wj-flex-grid-column >
        <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
          <!-- <InjectSample /> -->
          <!-- 回避方法 -->
          <InjectSample :store="store" />
        </wj-flex-grid-cell-template>
      </wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</template>