javascript - 如何将选定的 key 传递给另一个模板

Question

如何将选定的键传递给另一个模板以显示图表？我创建了一个导出多折线图的模板，其中我使用 Axios 从 API 获取数据。

在主页中，我创建了一个下拉列表，当用户选择一个项目时，所选项目或其值将传递到该图表模板，并且该模板应将图表返回到该所选项目。

// Home component
<template>
  <section>
    <label>City</label>
    <select @change="getArea()" v-model="key" class="custSelect2">
      <option :value="0">Select City</option>
      <option v-for="data in cityList" :value="data.id">{{ data.city }}</option>
    </select>

    <label>Area</label>

    <select @change="getWard()" v-model="keyArea" class="custSelect2">
      <option :value="0">Select Area</option>
      <option v-for="data in areaList" :value="data.id">{{ data.area}}</option>
    </select>

    <label>Ward</label>
    <select v-model="Polekey" @change="getPole()" class="custSelect2">
      <option :value="0">Select Ward</option>
      <option v-for="data in wardList" :value="data.id">{{ data.ward}}</option>
    </select>
    <label>Pole</label>
    <select v-model="PoleSelected" class="custSelect2">
      <option :value="0">Select Pole</option>
      <option v-for="data in PoleList" :value="data.poleid">{{ data.poleid}}</option>
    </select>
    <div>
      <Areachart />
    </div>
  </section>
</template>

// Area component
<script>
import { Line } from "vue-chartjs";

export default {
  extends: Line,
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    var self = this;

    axios
      .get("http://172.31.0.114:5008/api/city/data" + this.key) // key is the value that user selected
      .then(function(res) {
        self.dataList = res.data;
        // how to initilize data into below datasets
      })
      .catch(function(error) {
        console.log("Error:", error);
      });

    this.renderChart(
      {
        labels: [],
        datasets: [
          {
            label: "Data One",
            borderColor: "#FC2525",
            backgroundColor: this.gradient,
            data: []
          },
          {
            label: "Data Two",
            borderColor: "#05CBE1",
            data: []
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    );
  }
};
</script>

Answer 1

1. 通过 props 传递 _key (我假设它的类型是 String 并且是必需的)；
2. 监视 _key 更改并调用 updateChart 方法，因此每当父级更改 _key 时，都会进行适当的 API 校准；
3. 定义发送 GET 请求、处理请求并重新呈现图表的 updateChart 方法。
4. 在mounted钩子(Hook)中调用updateChart方法获取初始数据；
5. 在data中定义数据集，以便您可以在后续中更改它们 服务器响应处理程序。
6. 不要忘记在父组件中传递 _key 属性。

// In ParentComponent
<template>
  <Areachart :_key="PoleSelected"/>
</template>

<script>
import { Line } from "vue-chartjs";

export default {
  extends: Line,
  props: {
    _key: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      datasets: [
        {
          label: "Data One",
          borderColor: "#FC2525",
          data: []
        },
        {
          label: "Data Two",
          borderColor: "#05CBE1",
          data: []
        }
      ]
    };
  },
  watch: {
    _key() {
      this.updateChart();
    }
  },
  mounted() {
    this.updateChart();
  },
  methods: {
    updateChart() {
      axios
        .get("http://172.31.0.114:5008/api/city/data" + this._key)
        .then(res => {
          // proccess the response
          // I don't know your data model, so i can't write appropriate handler
          // for example this.datasets[0].data = res.data[0]

          this.renderChart(
            {
              labels: [],
              datasets: this.datasets
            },
            { responsive: true, maintainAspectRatio: false }
          );
        })
        .catch(function(error) {
          console.log("Error:", error);
        });
    }
  }
};
</script>