Posted at

Vue.js で、c3.js の Object を data に入れたら構造が変わった件

More than 1 year has passed since last update.


経緯


  1. c3.js でグラフを描画するComponentを作ろうとした

  2. c3.js の Object を後のイベントで更新するために、component の data に入れた

  3. なんか色々methodoが消えてる!!

【例えばこんな感じ】

/**

* Created by usr16001231 on 2017/03/13.
*/

Vue.component(
'chart',
'template' : '#chart'
{
props: ['chart_data'],
data: function () {
return {
chartObj: null
}
},
mounted: function () {
this.chartObj = c.generate({
// 初期データ
});
},
watch: {
chart_data: function () {
// Chart を更新する処理
}
}
/** 以下省略 **/
}
);


原因


  1. Vue.js では data にセットされた値の更新なおを検知するため、設定したObjectの中身を更新します

  2. Documentにも「オブジェクトはプレーンなものでなければなりません」と ちゃんと記載されていました

  3. ちなみに Component の Props も同じ


教訓


  1. やっぱりDocumentはちゃんと読みましょう


その他


  1. こういう時ってそうするのが一番いいんでしょうね?