javascript - Vue使用输入修改图表

Question

我有一个 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() Hook 中初始化，当我更新 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>

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

Answer 1

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

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

有关 Vue 观察者的更多信息:Watchers