Refresh-Komponente auf Get-Methode mit Vuejs

Question

Ich habe eine Komponente, die eine JSON-Datei auf bereitgestellte Phase analysieren.
Das Problem ist:
wenn ich auf eine Schaltfläche klicke, eine andere GET-Methode senden, um eine andere JSON-Datei zu erhalten und sie an meinen Component zu übertragen.
das Problem ist, dass die Komponente es sich nicht mit den neuen Requisiten neu geladen und meine Komponente die alten Werte
anzuzeigen Wenn jemand weiß, wie Komponenten zu aktualisieren, hier ist mein Code

<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> 

Hier ist der Code meiner graphe Komponente

<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> 

EDIT: ich weiß, wo das Problem ist:
die Daten der Eltern empfangen wird nur einmal auf der eingehängten Funktion behandelt! , deshalb wird bei Änderung nicht nachgeladen
Soll ich einen Beobachter auf Requisiten verwenden? wie kann ich die

Answer 1

Statt ein Verfahren zur Verwendung der Daten, verwenden Sie eine berechnete Eigenschaft für Ihre rows, columns und options Eigenschaften zu normalisieren. Auf diese Weise wird es automatisch aktualisiert, wenn sich eine der abhängigen Eigenschaften ändert.

Zum Beispiel Ihrer options Eigenschaft könnte eine berechnete Eigenschaft, die wie folgt aussieht:

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; 
    } 
} 

Nun, wenn this.data, this.isDigit oder this.rows Änderungen, die options Eigenschaft als auch aktualisiert.

Ihre rows und columns Eigenschaften würde wie folgt aussehen:

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; 
}, 

Answer 2

Die geänderte Eigenschaft erzwingen Update Ansicht tut nicht

auf Statusänderungen zu reagieren, ist es normalerweise besser, eine berechnete Eigenschaft oder Beobachter zu verwenden.

dieser Variante Versuchen

watch: { 
    timeSpec(){ 
    //do something 
    //this.normaliseData() 
    } 
}