Forms 提交表单后的VueJS生命周期

在执行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;
  }  

关联信息






提交
{{DailyBillabilityLinePlot（）}}
{{WeeklyMonthlyQuarterlyBarPlot（weeklyData）}
周报
月刊
从“d3”导入*作为d3
导出默认值{
姓名：'时间卡'，
道具：{
msg:String
},
数据（）{
返回{
apiUrl:“”，
我的号码：0，
环境：“，
apiTst:“，
姓名：“，
起始日期：“，
最终日期：“，
协会会员：“，
每日数据：[]，
周数据：[]，
月数据：[]，
}
},
方法：{
周月季条形图（数据）{
//绘制d3条形图
},
DailyBillabilityLinePlot（）{//绘制另一个d3线图}
getAssociatesbyIdAndDates（）{
//连接到后端并获取员工列表
// http://localhost:8080/timecards/period/test/274/2020-04-14/2020-04-22
log（“根据初始日期和最终日期从后端获取关联数据…”）；
this.axios.get（this.apiUrl+“test/period/test/”+this.associateId+“/”+this.initialDate+“/”+this.finalDate）
。然后（响应=>{
this.dailyData=response.data；
console.log（响应状态）；
})
.catch（错误=>{
控制台错误（error）；
})
this.axios.get（this.apirl+“test/weekly/”+this.associateId+“/”+this.initialDate+“/”+this.finalDate）
。然后（响应=>{
this.weeklyData=response.data；
console.log（响应状态）；
})
.catch（错误=>{
控制台错误（error）；
})
this.axios.get（this.apirl+“test/monthly/”+this.associateId+“/”+this.initialDate+“/”+this.finalDate）
。然后（响应=>{
this.monthlyData=response.data；
console.log（响应状态）；
})
.catch（错误=>{
控制台错误（error）；
})
},}
onSubmit（）{
设Pi={
姓名：this.name，
initialDate：this.initialDate，
最后一天：这个，最后一天，
}
此.$emit（'consultantApi-submitted'，consultantApi）
this.name=“”
this.initialDate=“”
this.finalDate=“”
}
},
挂载：函数（）{
this.apiUrl=process.env.VUE_APP_BACKEND_API；
this.environment=process.env.NODE\u env；
}  

初始形式

D3在提交完成的表格后绘制

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

---

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

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

例子：

var-app=Vue.createApp({
数据（）{
返回{
abc:‘abc’，
名单：[1,2,3]
};
}
});
app.component（“我的图表”{
模板：`{Math.random（）}}`
});
应用程序安装（“应用程序”）

{{Math.random（）}}
我认为您的错误在父组件中。我会试着检查它多长时间出现一次。您的表单似乎在输入更改事件时持续提交，而不是在表单提交时持续提交。
您是否需要表单在提交后保持可见，以便用户可以输入新信息？或者表单可以在提交后消失吗？这是一个选项，但我更希望用户可以创建一个新提交，以查看其他日期的计费能力。能否显示设置weeklyData的代码？完成，它位于getAssociatesbyIdAndDates（）中。每次调用update（）时都会创建plotGroup元素。创建一次并在update（）中更新其内容嘿，丹尼尔，我不确定你想给我看什么。每次我在表单中添加或删除一个字母时，都会生成一个新的随机值。这正是我想要避免的。我希望仅在单击提交按钮时生成值。你认为你可以更新你的例子吗？无论如何，谢谢你的回答。有两个数字，上面的一个是与数据相同的组件的一部分，并且随着输入的变化而变化，第二个是在另一个组件内，并且没有变化