vuejsを使用したgetメソッドのコンポーネントのリフレッシュ

Question

Iマウントされたフェーズで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> 

EDIT：
親から受け取ったデータがマウント機能に一度だけ処理されます：問題がどこにあるか私が知っています！ 、それが変更にリロードされない理由です。
小道具でウォッチャーを使うべきですか？私は

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

Answer 2

あなたの変更されたプロパティは、状態の変化に対応するには、ビュー更新

を強制しないことを行うことができますどのように、それは計算 プロパティまたはウォッチャーを使用する方が良いでしょう。

あなたrows、columnsとoptions性質のために計算されたプロパティを使用し、代わりに、データを正規化するための方法を使用しての

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