Vue使用输入修改图表答案

【问题标题】：Vue using input to modify chartVue使用输入修改图表
【发布时间】：2018-02-15 16:21:17
【问题描述】：

我有一个 Vue 组件，我很困惑在哪里使用数据、道具和计算属性。

目的：我想要一个可以改变图表上最大值的输入。

Vue.component('chartist', {
  template: "#chartist",
  props: {
    value: Object,
    show_controls: {
      type: Boolean,
      default: false
    },
    min: Number,
    max: Number
  },
  data: function() {
    return {
      data: [],
      calcMax: null,
      calcMin: null,
      chart: null
    }
  },
  methods: {
    createData(d) {
      let data = Object.assign({}, d)

      let referrers = Object.keys(data)
      let vals = Object.values(data)

      let final_data = []

      for ( let ref of referrers ) {
        let temp = {}
        temp['name'] = ref
        temp['data'] = data[ref]
        final_data.push(temp)
      }

      this.data = final_data
    }
  },
  computed: {
    otherMax: () => {
      this.chart.options['max'] = this.calcMax
    }
  },
  mounted() {
    this.createData(this.value)
    this.chart = new Chartkick.LineChart(this.$refs.timechart, this.data)
  } 
})

我的图表在 mounted() 挂钩中初始化，当我更新 calcMax 时，我想将该值分配给图表的选项，即

this.chart.options['max'] = this.calcMax

HTML

<script type="text/x-template" id="chartist">
    <div class="card">
        <div class="card-header card-chart" style="min-height:300px;" data-background-color="orange">
            <div id="timechart" style="min-height:300px;" ref='timechart' v-bind:class="'chart' + location.id"></div>
        </div>
        <div class="card-content">
            <div v-if="show_controls">
                <input type="number" v-model="calcMax">
                <input type="number" v-model="calcMin">
            </div>
        </div>
    </div>
</script>

完成此任务的正确模式是什么？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

只需观察calcMax 的值并在它发生变化时执行更新。

watch: {
  calcMax(v) {
    this.chart.options.max = v;
  }
}

更多关于 Vue 观察者的信息：Watchers

【讨论】：