用vuejs獲取方法的刷新組件

Question

我有一個組件，它在已安裝的階段上解析json文件。
問題是：
當我點擊一個按鈕，發送另一個GET方法來獲得另一個json文件並將其傳輸到我的組件。
的問題是，部分不與新道具自動重新加載和我的組件顯示舊值
如果有人知道如何刷新組件，這裏是我的代碼

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

編輯：我知道是哪裏的問題：從父收到
的數據處理只需一次就安裝功能！ ，這就是爲什麼它不會在更改時重新加載
我應該在道具上使用觀察器嗎？我怎麼能做到這一點

Answer 1

而是使用一種方法來標準化數據，使用一個計算性能爲您rows，columns和options性能。這樣，如果任何相關屬性發生更改，它將自動更新。

例如，您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; 
}, 

Answer 2

你改變屬性不會強制視圖更新

作出反應狀態的變化，它通常是更好地使用計算 財產或觀察者。

試試這個變種

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