前提・実現したいこと
・ユーザーのランキング遷移をチャートで表示して動作させたい
・ユーザーごとに表示したいチャート数は異なる(1個~5個)
●環境
vue-chartJS
Laravel
●実装方法
v-forで回してチャートを複数動的に作成、:chart-dataと:optionsに指定する変数名を動的にしようとしている
例えば
<div v-for="(chart, index) in chartset" :key="index"> <chart-component :chart-data="`chart${index}`" :options="`options${index}`" /> <button @click="reloadData(`${index}`)">reload</button> </div>
のように。しかしながら、エラーになります。
エラー:
TypeError: Cannot create property 'datasets' on string 'chart0'
※buttonの@clickは正常に展開され、動作もしています
一方で、すべて文字列で
<div v-for="(chart, index) in chartset" :key="index"> <chart-component :chart-data="chart0" :options="options0" /> </div>
決め打ちするとチャートの描画やデータ更新など意図した動作をします。
変数を織り交ぜるとエラーになります
:chart-dataや:optionsを動的に指定する方法か、
もしくは
・ユーザーのランキング遷移をチャートで表示して動作させたい
・ユーザーごとに表示したいチャート数は異なる(1個~5個)
を実現させるためにみなさんならどう実装するか、アドバイスいただけますでしょうか。
発生している問題・エラーメッセージ
TypeError: Cannot create property 'datasets' on string 'chart0'
該当のソースコード
<div v-for="(chart, index) in chartset" :key="index"> <chart-component :chart-data="`chart${index}`" :options="`options${index}`" /> </div>
試したこと
文字列で指定→これは動作する
<div v-for="(chart, index) in chartset" :key="index"> <chart-component :chart-data="chart0" :options="options0" /> </div>
自己解決しました。
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。