Chart.jsのグラフをvue.jsを使って書いてみた2

Chart.jsのグラフをvue.jsを使って書いてみた1
前回作ったもの
https://jsfiddle.net/dqnsan/5zrf6whv/

これ見直して思ったけど全くvue.jsを活かしてなくて草
今回からちゃんとするから、、、

というわけで、
ここにボタンを押下したら要素が追加されるようにしていきます。

inputの追加

グラフは
・label
・backgroundColor
・data
の三つで出来ているので
それぞれを追加する処理を書いていきます。

vueのdataに下記を追加

        data: {
            nameSet: 'ビタミンZ',
            numSet: 10,
            colorSet: '#FFFF00',
            chartLists: [
                { name: 'たんぱく質' ,color: '#2ecc71', data: 10 },
                { name: '炭水化物' ,color: '#3498db', data: 30 },
                { name: 'ビタミンA' ,color: '#95a5a6', data: 3 },
                { name: 'ビタミンB' ,color: '#9b59b6', data: 17 }
            ]
        },

そしてやっとvueらしいことをしていきます。
inputをhtmlに追加して「v-model」でデータバインディングをする。

    <form>
        <label>
            栄養名<input type="text" name="" v-model="nameSet" placeholder="例)ビタミンA">
        </label>
        <label>
            数値<input type="number" name="" v-model="numSet">
        </label>
        <input type="color" name="" value="" v-model="colorSet">
        <input type="button" value="追加">
    </form>

これはブラウザによって使えないことあるのでchromeで見てね！

<input type="color" name="" value="" v-model="colorSet">

これでvueに追加したdataの中身が各種inputに入るようになりました。
ブラウザ上でinputの値を変更したらdataの中の値も変わりますね。

それではグラフに追加する処理を書いていきます。

            addChartList: function () {
                //forEachの中ではthisの対象が変わるためselfを使う
                self = this;

                //configの中にinputへ入力して値をpush
                config.data.labels.push(this.nameSet);
                config.data.datasets.forEach(function (dataset) {
                    dataset.backgroundColor.push(self.colorSet);
                    dataset.data.push(self.numSet);
                });

                //Chart.jsに存在するupdate関数を使用
                chart.update();

                //グラフに追加したらinputを初期状態に戻す
                this.nameSet = 'ビタミンZ';
                this.numSet = 10;
                this.colorSet = '#FFFF00';
            }

そしてhtmlにclickしたらイベントが発火するように追加

        <input type="button" value="追加" @click="addChartList()">

こんな感じでしょうか？

vueじゃなかったら「addChartList」の引数に値を渡して追加する感じだと思います。

今回の結果
https://jsfiddle.net/dqnsan/5zrf6whv/6/

次回はバリデートか削除の追加かな、、、