javascript - 使用vuejs在get方法上刷新组件

Question

我有一个组件，它在挂载阶段解析一个 json 文件。
问题是:
当我点击一个按钮时，发送另一个 GET 方法来获取另一个 json 文件并将其传输到我的组件。
问题是组件不会使用新 Prop 重新加载自身，而我的组件显示旧值
如果有人知道如何刷新组件，这是我的代码

<template>
  <div class="perturbo">
    <div class="col-md-3 btnMenu">
      <button v-for="item,index in perturboButtonData.button_list" type="button"
              v-bind:style="'background:white'"
              class="btn-lg btn-block myBtnClass"
              @click="activeButton(index)">
        {{item.label}}
      </button>
    </div>
    <div class="col-md-9">
      <div class="row">
        <graphe
          v-for="ana,index in perturboData.ANA"
          :key="ana.id"
          :data="ana"
          :index="index"
          type="number"
          :timeSpec="perturboData.liste_dates">
        </graphe>
      </div>
      <div class="row">
        <graphe
          v-for="dig,index in perturboData.DIG"
          :key="dig.id"
          :index="index"
          :data="dig"
          type="number"
          isDigit="YES"
          :timeSpec="perturboData.liste_dates">
        </graphe>
      </div>
    </div>
  </div>
</template>



<script>
  import axios from 'axios'
  import Graphe from './Graphe/Graphe.vue'
  export default {
    name: 'perturbo',
    components : {
      'graphe' : Graphe
    },
    data: function () {
      return {
        isActivated: false,
        perturboData: {},
        perturboButtonData: {}
      }
    },
    methods: {
      activeButton : function (index) {
          console.log(this.perturboButtonData)
        axios.get('./static/cgi/' + this.perturboButtonData.button_list[index].link)
          .then((response) => {
            this.perturboData = response.data;
            this.isActivated = true

          })
      }
    },
    mounted : function () {
      axios.get('./static/cgi/format_json_perturbo.json')
        .then((response) => {
          this.perturboButtonData = response.data;
        })
    }
  }
</script>

这是我的 graphe 组件的代码

<template>
  <div class="graphe">
        <vue-chart
          :chart-events="chartEvents"
          :columns="columns"
          :rows="rows"
          chart-type="LineChart"
          :options="options">
        </vue-chart>
  </div>
</template>



<script>
  export default {
    name: 'graphe',
    props: {
      data: {},
      timeSpec : Array,
      index: Number,
      type: String,
      isDigit:String,
    },
    data: function () {
      return {
        chartEvents: {
          'select': function() {

          },
          'ready': function() {
          }
        },
        rows: [],
        columns: [],
        options: {
          title: this.data.name,
          hAxis: {

          },
          vAxis: {
            ticks : []
          },
          width: 650,
          height: 350,
          curveType : 'function'
        }
      }
    },
    methods:  {
      normaliseData : function () {
        for (let i = 0; i < this.timeSpec.length; i++) {
          this.rows[i] = []
          this.rows[i][0] = parseFloat(this.timeSpec[i])
        }
        this.columns[0] = { 'type': 'number', 'label': 'time' }
        for (let i = 0; i < this.data.data.length; i++){
          this.columns[i+1] = {'type': this.type ,'label': this.data.data[i].name}
        }
        for (let i = 0; i < this.timeSpec.length; i++) {
          for (let y = 0; y < this.data.data.length; y++) {
            this.rows[i][y+1] = parseFloat(this.data.data[y].data[i])
          }
        }
        if (this.isDigit == "YES"){
          this.digRow(this.rows)
          for (let v = 0; v < this.data.data.length; v ++){
            this.options.vAxis.ticks[v] =  { v: v, f:  this.data.data[v].name}
          }
          this.options.curveType = ''
        }
      },
      digRow : function (rowTab) {

        let newRow = []
        let lengthMax = rowTab.length
        let rowTmp = []
        let index = 0

        for (let i = 0; i < lengthMax; i ++){
            rowTmp[index] = []
            rowTmp[index][0] = rowTab[i][0]
            for(let y = 1; y < rowTab[i].length; y ++){
              rowTmp[index][y] = rowTab[i][y] + y - 1
            }
            if (i + 1 !== rowTab.length)
            {

              newRow = rowTmp[index].slice()
              newRow[0] = rowTab[i+1][0]
              rowTmp.splice(index+1,0,newRow)
              index = index + 2
            }
        }
        this.rows = rowTmp
      }
    },
    mounted: function () {
//        // pour les colones
        this.normaliseData()
      }
  }
</script>

编辑:我知道问题出在哪里:
从父级接收的数据在挂载函数上只处理一次! ，这就是为什么它不会在更改时重新加载
我应该在 Prop 上使用观察者吗？我该怎么做

Answer 1

不是使用方法来规范化数据，而是为您的行、列和选项属性使用计算属性。这样，如果任何依赖属性发生变化，它将自动更新。

例如，您的 options 属性可以是一个计算属性，如下所示:

computed: {
  options() {
    let options = {
      title: this.data.name,
      hAxis: {

      },
      vAxis: {
        ticks : []
      },
      width: 650,
      height: 350,
      curveType : 'function'
    };

    if (this.isDigit == "YES"){
      this.digRow(this.rows)
      for (let v = 0; v < this.data.data.length; v ++){
        options.vAxis.ticks[v] =  { v: v, f:  this.data.data[v].name}
      }
      options.curveType = ''
    }

    return options;
  }
}

现在，每当 this.data、this.isDigit 或 this.rows 更改时，options属性也会更新。

您的 rows 和 columns 属性将如下所示:

rows() {
  let rows = [];

  for (let i = 0; i < this.timeSpec.length; i++) {
    rows[i] = []
    rows[i][0] = parseFloat(this.timeSpec[i])

    for (let y = 0; y < this.data.data.length; y++) {
      rows[i][y+1] = parseFloat(this.data.data[y].data[i])
    }
  }

  return rows;
},
columns() {
  let columns = [];
  columns[0] = { 'type': 'number', 'label': 'time' }

  for (let i = 0; i < this.data.data.length; i++) {
    columns[i+1] = {'type': this.type ,'label': this.data.data[i].name}
  }

  return columns;
},