Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData"

[huangche007]

I met some problems,such as:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData"

this sub component is lineMarker.js，code as follow:

export default Line.extend({
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  watch: {
    options () {
      this.renderChart(this.chartData, this.options);
    },
    chartData () {
      this.renderChart(this.chartData, this.options);
    }
  }
})

the parent component is xxxDetail.vue,these code as follow:

<div class="canvas-area">
        <div id="c-container">
          <line-example
            :chart-data="mData"
            :options="options"
            :width="400"
            :height="200"
            v-show="isShowMap"
          >
          </line-example>
        </div>
      </div> 
import LineExample from './lineMarker.js'
 export default{
    components: {
      LineExample
    },
    data() {
      return {

        mData: {

        },
        options: {
          tooltips: {
            intersect: false // default: true. if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
          },
          animation: {
            duration: 1000  // 动画时长单位:ms
          },
          responsive: true, // 长宽，100%.如果要单设长和宽的话，要将responsive 设为false
          maintainAspectRatio: false // 保持长宽比
        },
        
      }
    },

How can I do?

[huangche007]

<div class="canvas-area"> <div id="c-container"> <line-example :chart-data="mData" :options="options" :width="400" :height="200" v-show="isShowMap" > </line-example> </div> </div>

[apertureless]

Whats your enviroment? vue-cli webpack template?

Try this:

export default {
  extends: Line,
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  watch: {
    options () {
      this.renderChart(this.chartData, this.options);
    },
    chartData () {
      this.renderChart(this.chartData, this.options);
    }
  }
}

This worked for people who are using the electron vue template

[huangche007]

@apertureless Yeah ,Thanks a lot ,Solved my problem,but i wanna know why.so wired

[apertureless]

To be honest, I don't know. However with v3 release the Vue.extend() will be removed and you always will have to use either

extends or mixins: [] . Which should reduce some weird sideeffects.

[Amanej]

This did not help.

Any prop I add to the component that wraps the vue-chartjs Line component, like the above example generates a mutating prop directly error.

[apertureless]

@Amanej

Do you have any reproduction? jsfiddel etc?