Question

场景： 网站上的统计视图，该视图必须呈现三个不同的数据表，一次绘制一个。

代码： 该视图是一个组件，在它的内部有三个按钮，每个按钮设置一个变量，该变量用表呈现一个组件，根据该变量值，表不必调用具有不同信息的api。

结构如下：

统计组件：

<template>
  <div class="buttons">
    <div @click="setStatisticSection('POSITIONS')">POSITIONS</div>
    <div @click="setStatisticSection('RESULTS')">RESULS</div>
    <div @click="setStatisticSection('FIXTURE')"">FIXTURE</div>
  </div>
  <data-table v-if="activeStatistic === 'FIXTURE'" data="fixture" environment="view" :loading="loading"></data-table>
  <data-table v-if="activeStatistic === 'RESULTS'" data="results" environment="view"></data-table>
  <data-table v-if="activeStatistic === 'POSITIONS'" data="positions" environment="view"></data-table>
</template>
<script>
import dataTable from '@/components/Table.vue';

export default {
  components: {
    'data-table' : dataTable,
  },
  data() {
    return {
      activeStatistic: 'RESULTS',
    }
  },
  methods: {
    setStatisticSection(section) {
      this.activeStatistic = section;
    }
  },
}
</script>

表组件：

<template>
  <div>
    <table class="table__fixture">
      <thead>
        <tr>
          <td>FECHA</td>
          <td>HORA</td>
          <td>CONF</td>
        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.data" v-for="row in tableData.data" :key="row.id">
          <td>{{row.fecha | date}}</td>
          <td>{{row.fecha | time}}</td>
          <td>{{row.zona}}</td>
        </tr>
      </tbody>
    </table>
    <table class="table__postions">
      <thead>
        <tr>
          <td>POSICIÓN</td>
          <td>PTS</td>
          <td>ARR</td>

        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.data" v-for="row in tableData.data" :key="row.id">
          <td>{{row.posicion}}</td>
          <td>{{row.arrastre}}</td>
          <td>{{row.pj}}</td>
        </tr>
      </tbody>
    </table>
    <table class="table__results">
      <thead>
        <tr>
          <td>FECHA</td>
          <td>HORA</td>
          <td>CONF</td>
        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.data" v-for="row in tableData.data" :key="row.id">
          <td>{{row.fecha | date}}</td>
          <td>{{row.fecha | time}}</td>
          <td>{{row.zona}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  props: ['data', 'environment'],
  data() {
    return {
      tableData: '',
    };
  },
  mounted() {
    if (this.data === 'fixture' && this.environment === 'view') {
      this.fetch('fixture', 1, 15);
    } else if (this.data === 'positions') {
      this.fetch('positions', 1, 100);
    } else if (this.data === 'results') {
      this.fetch('results', 1, 15);
    }
  },
  methods: {
    async fetch(data, page, perPage) {
      console.log('Fire!');
      const thiss = this
      if (data === 'fixture') {
        try {
          const response = await axios.get(`apilinkhere/public/fixture?page=${page}&per_page=${perPage}`);
          thiss.tableData = response.data;
        } catch (e) {
          throw new Error(e);
        }
      } else if (data === 'positions') {
        try {
          const response = await axios.get(`apilinkhere/positions?page=${page}&per_page=${perPage}`);
          thiss.tableData = response.data;
        } catch (e) {
          throw new Error(e);
        }
      } else if (data === 'results') {
        try {
          const response = await axios.get(`apilinkhere/public/results?page=${page}&per_page=${perPage}`);
          thiss.tableData = response.data;
        } catch (e) {
          throw new Error(e);
        }
      }
    },
  },
};
</script>

问题：

这种情况是，已挂接的挂钩仅在第一个组件渲染上触发，而不在每个渲染上触发（例如，当我更改activeStatistic时），并且如果我将方法调用api的方法添加到更新的表数据上正如文档中所解释的那样，钩子会驱动到无限的方法调用链。

Vue文档说，我会监视要执行此操作的变量，但是我不确定如何执行该操作或从何处监视此变量。

重要提示：

您可能会看到我显示的代码存在一些不一致之处（例如，将过滤器应用于脚本中不存在的模板中的变量），这是因为我为了便于阅读而清理了复制粘贴的代码，不会影响问题或提供解决方案所需的信息。如果您发现某些语言不一致，则是由于原始代码中有一些西班牙语单词。

Answer 1

解决方案：

我只是在“数据”属性中添加了一个观察者

如何在vuejs中组件的每个渲染上正确调用异步方法？

1 个答案: