props の値を data に置き換えたい

Question

前提・実現したいこと

chart.jsを使ってグラフを描画しているのですが、動的に値を変えるところで詰まっています。。

親コンポーネントから子コンポーネントにprops(連想配列)で値をわたしており、
データが渡った時点でグラフを再描画しています。
dataを取得する際にpropsから取得するようにしているのですが、うまくいきません。
watchや$forceUploadを使ってみたのですがなかなかうまくいかないです。。

vueにお詳しい方ご教授頂けると幸いです！！

<chart class="chart" :chartData="chartData"></chart>

export default {
  extends: Line,
  name: "chart",
  data() {
    return {
      data: {
        // labelとdatasetsは可変
        // ここがうまく行っていない！！
        labels: this.chartData['labels'],
        datasets: [
          {
            label: this.chartData['shop'],
            data: this.chartData['売上'],
            borderColor: "rgba(255, 99, 132, 1)",
            fill: false,
            borderWidth: 2,
            type: "line",
            lineTension: 0.1
          },
          {...
...
...

  props: {
    // 期間
    chartData: Object
  },
  watch: {
    chartData: function(){
        this.renderChart(this.data, this.options)
    },
  },

Comments

[dameo]

vue詳しくないですが、propsのchartDataがObjectってだけでは、dataでthis.chartDataを見てもObjectだからlabelsもshopも売上も入ってないのではないでしょうか？
まずはもっと小さいものを作って理解した上で、少しずつ出来ることを増やしてから、それらを組み合わせて作りましょう
よく分からないものを組み合わせて「出来ません」と他人に聞くのはおかしいですよ
と書いてから気付きました
親から渡されてたんですね
だとすると、親のchartDataが分からないと分からないかと…
そもそもうまく行かないのは何がうまく行かないのでしょう？

[u.sayaka0112]

props にobjectと記述しているのはデータを受け取る際に型を指定しているだけです。
https://jp.vuejs.org/v2/guide/components-props.html

データの受け取り自体はできているのでその点は問題ないかと思います。
わたしが知りたいのはデータを更新する方法です。。

[dameo]

あ、Validationでしたか…すみません。教えてもらっちゃいましたね。もううろ覚えなので。
とりあえず、親のchartDataは何者ですか？
更新はどう上手く行かないのでしょうか？
受け渡しは上手く行っていて、bindも出来ている？として、何が出来ていないのかが分からないのです

[u.sayaka0112]

chartDataは連想配列で下記のようにデータを取得しています。
datasets: [
{
label: this.chartData['shop'],
data: this.chartData['売上'],
　　　　　　...

そしてchartDataを親から受け取ると、下記のようにグラフを更新しています。
watch: {
chartData: function(){
　　　　　　　 // ここでデータを更新したい
this.renderChart(this.data, this.options)

$forceUpdateなど試しましたが、それだとpropsまで更新されるので、
特定のデータを更新する術を知りたいです。
renderChartの引数にグラフの情報を追加すれば良いだけかもしれませんが、
できればここで更新したいです。
書いてて思ったのですが、関数を作ればいいだけかもしれません。

[dameo]

書いてある部分ではなくて、書いてない部分ですよ
親から受け取るchartDataが何者で、それを誰がどのように更新するのかが分からないんですって…
全体像が見えません

[u.sayaka0112]

・chartDataは連想配列です。
　例：{ 'label': 'shopA', '売上': '3000' }
・UI上でショップの一覧があり、それをクリックすると親から子にデータを渡しています。
　受け取るとrenderChart() を使ってグラフを再描画しています。

[dameo]

すみません。書いてあるところではなくて、書いてないところです。
具体的にどうなっているのか見せてもらえないと、なぜ？ってところ追求できなくないか？と言ってるのですよ…始めから…
あなたが言ってることは最初から何も情報が増えていません

[u.sayaka0112]

これ以上情報必要でしょうか？？
再描画をする前にdataを更新しさえすればこの質問の回答としては良いと思います。。
詳しくない方では困ってしまいます。。

関数を置くとできましたので、これにてこの質問は閉じたいと思います。
ご回答いただきありがとうございます。

[dameo]

bindされてるなら更新されないのには理由があると思いますけどね
まあ本人がいいのならいいです
閉じるんだったら自己解決の回答を入れてください

[u.sayaka0112]

この問題は上記の情報だけで解決するそこまで難しくない問題のはずです。
bindの問題ではなく、データの更新の問題だと具体的に繰り返し記述しています。

ご自身の知識の範囲内で答えられないにも関わらず、
上から目線で投げやりな態度は世の中のためにも改めて頂きたいです。。

Answer 1

結局何を問題としてそれをどう解決したのか、他人には全く分からない質問だったので、こういう質問だったのだろう？という推測を元に回答もどきを書いておきました。

仮定した質問

chart.jsをvueから使うため、vue-chartjsを利用したが、以下のコードでボタンを押してもchartが更新されない。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
    <sample-chart :chart-data='chartData'></sample-chart>
    <button @click="buttonClicked">Redを増やす</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            'sample-chart': {
                extends: VueChartJs.Bar,
                mounted() {
                    this.renderChart(this.chartData, this.options)
                },
                props: ['chartData']
            }
        },
        data: {
            chartData: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    data: [12, 19, 3, 5, 2, 3]
                }]
            }
        },
        methods: {
            buttonClicked: function() {
                this.chartData.datasets[0].data[0]++;
            }
        }
    });
</script>

仮定した質問に対する回答

コメントした部分を直下のコードで置き換えると動きます。
vue-chartjsのreactivePropを使った上で、chartDataそのものを置き換えています。

...
                // props: ['chartData']
                mixins: [VueChartJs.mixins.reactiveProp]
...
                // this.chartData.datasets[0].data[0]++;
                const chartData = Object.create(this.chartData);
                chartData.datasets[0].data[0]++;
                this.chartData = chartData;
...

Answer 2

    chartData: function(newChart, oldChart) {
      let chart = this.makeChart(newChart);
      this.renderChart(chart, this.options);
    }
...
    makeChart(chartData) {
      let chart = {
        labels: chartData['labels'],
        datasets: [
          {
            label: chartData["shop_name"],
            data: chartData["vector"],
            borderColor: "rgba(255, 99, 132, 1)",
            fill: false,
            borderWidth: 2,
            type: "line",
            lineTension: 0.1
          },
        ],
        return  chart
      };

関数を設定することで解決する簡単な問題でした。。