用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() 
    } 
}