VueJs，Vue公司，chartjs - 变异道具

[Vue公司提醒]：避免突变道具直接，因为每当父组件重新呈现值将被覆盖。相反，使用基于道具值的数据或计算属性。道具被突变：“chartData”（发现）

现在这似乎是一个常见的错误，但林不知道如何使用Vue公司与Vue公司-chartjs和IVE绕过它在这种情况下

IM得到了以下

bar_chart.vue

<script> 
    import { Bar, mixins } from 'vue-chartjs' 

    export default Bar.extend({ 
    name:"bar_chart", 
    mixins: [mixins.reactiveProp], 
    props: ["width","height","options"], 
    mounted() { 

     this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false}); 
    } 
    }) 
</script>

module_content.vue

<template> 
    <div id="module_content"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-md-6 bar_chart_test"> 
      <bar_chart 
      :chartData="DataSet" 
      :width="400" 
      :height="200"> 
      </bar_chart> 
      <button v-on:click="getBarDate">Hey there!</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
import bar_chart from 'components/controls/bar_chart.vue' 

export default { 
    name: 'module_content', 
    components: { 
    bar_chart 
    }, 
    data: function() { 
    return { 
     data_source: {} 
    } 
    }, 
    methods: { 
    getBarDate: function() 
    { 
     this.DataSet = ({ 
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
      datasets: [ 
      { 
       label: 'GitHub Commits', 
       backgroundColor: '#f87979', 
       data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] 
      } 
      ] 
     });   
    } 
    }, 
    computed: { 
    DataSet: { 
    cached: false, 
     get: function() { 
     return this.data_source 
     }, 
     // setter 
     set: function (newValue) { 
     this.data_source = newValue; 
     } 
    }  
    } 
} 
</script>

基本上我想要那个函数getBarDate能够设置ChartData（用一个ajax调用后面的代码来取代），通过了数百个排列和文档，但仍然不明白。

我想明白，你不能直接设置，这很好，错误是明确的，但不能看到任何使用vue图表混合使用的例子？

我已经尝试在bar_chart.vue中设置计算表达式或数据变量，并在模块内容中设置相同。

我只是不能似乎得到它的行为

谁能帮感谢

来源

2017-03-20 Saragan

的数据不要直接发生变异的道具。使用道具来初始化数据值作为，

data: function() { 
    return { 
    variableDataSet: this.Dataset, 
    } 
},

并且当variableDataSet改变发射的事件，

watch: { 
    variableDataSet: function(val){ 
    this.$emit('datasetchanged', val); 
    } 
}

将由部件使用类似捕获，

<bar_chart 
    :chartData="DataSet" 
    @datasetchanged="value => { DataSet = value }"> 
</bar_chart>

来源

2017-04-08 17:22:40

您可以使用vuex存储图表

来源

2017-04-02 13:38:00

VueJs，Vue公司，chartjs - 变异道具

回答

相关问题