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

您更改的财产不会强制查看更新

为了对状态变化作出反应，通常最好使用计算机财产或观察者。

尝试此变体

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

Answer 2

不使用方法来规范化数据，而是使用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;
},

使用vuejs刷新get方法的组件

2 个答案: