提交表单后的 VueJS 生命周期

Question

在执行 API 调用以获取一些数据后，我想在 vuejs 中绘制一些 d3js 字符。为此，我创建了一个表单，其输入用于从 API 收集数据。提交表单后，我会调用我的 d3js 函数来根据检索到的数据绘制图表。我希望仅在数据不为空时调用绘图函数。为此，我使用了基于数据长度的条件渲染 v-if。到目前为止，一切都很好。我的问题是，如果我在表单中输入任何内容，一旦绘制了图，就会创建一个新图，就好像每次 if 语句被一次又一次地评估一样，我不知道它是否与生命周期有关，但是如何避免这种行为呢？

<template>
  <meta charset="utf-8">
  <h4>Associate Information</h4>
        
          <form @submit.prevent="onSubmit">
            <input placeholder="Associate Id" v-model="associateId" /> <br />
            <input placeholder="Starting date" v-model="initialDate" /> <br />
            <input placeholder="Ending date" v-model="finalDate" /> <br />
            <button v-on:click="getAssociatesbyIdAndDates()">submit</button>
          </form>
        
  

  <div class="chart" v-if="dailyData.length">
          {{ DailyBillabilityLinePlot() }}
          {{ WeeklyMonthlyQuarterlyBarPlot(weeklyData) }}
  </div>
  
  <div class="linePlot"></div>
  <div class="barPlot" v-if="weeklyData.length">
    
    <button v-on:click="WeeklyMonthlyQuarterlyBarPlot(weeklyData)">Weekly</button>
    <button v-on:click="WeeklyMonthlyQuarterlyBarPlot(monthlyData)">Monthly</button>
    <svg id="chart" viewBox="0 0 960 300"></svg>
    
  </div>
</template>

<script>
import * as d3 from 'd3'
export default {
  name: 'Timecard',
  props: {
    msg: String
  },

  data() {
    return {
      apiUrl: "",
      myNumber: 0,
      environment: "",
      apiTst:"",
      name:"",
      initialDate: "",
      finalDate: "",
      associateId: "",
      dailyData: [],
      weeklyData:[],
      monthlyData:[],
    }
  },
methods: {
  WeeklyMonthlyQuarterlyBarPlot(data){
  // plot a d3 bar plot
      
 },
  DailyBillabilityLinePlot() { // plot another d3 line plot}
  getAssociatesbyIdAndDates() {
      // Connect to the backend and get the list of associates
      // http://localhost:8080/timecards/period/test/274/2020-04-14/2020-04-22
      console.log("Fetching the data for an associates from the backend based on initial date and final date...");
      this.axios.get(this.apiUrl + "test/period/test/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
        .then(response => {
            this.dailyData = response.data;
            console.log(response.status);
        })
        .catch(error => {
          console.error(error);
        })

      this.axios.get(this.apiUrl + "test/weekly/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
        .then(response => {
            this.weeklyData = response.data;
            console.log(response.status);
        })
        .catch(error => {
          console.error(error);
        })

      this.axios.get(this.apiUrl + "test/monthly/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
        .then(response => {
            this.monthlyData = response.data;
            console.log(response.status);
        })
        .catch(error => {
          console.error(error);
        })
    },}
  onSubmit() {
      let consultantApi = {
       name: this.name,
       initialDate: this.initialDate,
       finalDate: this.finalDate,
     }
     this.$emit('consultantApi-submitted', consultantApi)

     this.name = ''
     this.initialDate = ''
     this.finalDate = ''
    }
  },
  mounted: function() {
    this.apiUrl = process.env.VUE_APP_BACKEND_API;
    this.environment = process.env.NODE_ENV;
  }  

初始形式

提交完整表格后的 D3 绘图

每当我按下表格中的任何键时，都会创建新的 d3 绘图

Answer 1

是的，这是因为更新任何模型都会重新渲染整个组件。

为了解决这个问题，我发现最简单的方法是将图表放入另一个组件中，以便保护重新渲染。

示例：

var app = Vue.createApp({
  data() {
    return {
      abc: 'ABC',
      list: [1, 2, 3]
    };
  }
});

app.component("my-chart", {
  template: `<div >{{Math.random()}}</div>`
});

app.mount("#app");

<script src="https://unpkg.com/vue@3.0.6/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="abc" />
  <div v-if="list.length">
    {{Math.random()}}
  </div>
  <my-chart></my-chart>
</div>

Answer 2

我认为您的错误在父组件中。我会尝试检查它多久发出一次consultApi。您的表单似乎一直在提交输入更改事件而不是提交表单。