Question

我有一个Vue组件，我在混淆使用数据与prop与计算属性的位置。

目的：我希望有一个输入可以更改我的图表上的最大值。

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>

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

Answer 1

只需观看calcMax的值，然后在更改时执行更新。

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

有关Vue观察员的更多信息：Startup.cs

Vue使用输入来修改图表

1 个答案: