警告：组件渲染功能中可能存在无限更新循环
我需要根据年份分开我的数据收集。因此，结果将显示如下：
如果结果仅显示单个年份的集合，则这些结果将显示为：
当结果显示为单一年份时，过滤工作正常。但是当涉及到几年时，它根本不起作用。
我认为是由于以下错误：
[Vue警告]：组件渲染中可能存在无限的更新循环 功能。
我的 vue component ：
<template>
<div class="maintenance-history">
<div class="content mt-3">
<div class="animated fadeIn">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">Maintenance History</div>
<div class="card-body table-responsive">
<div class="col-md-12">
<div class="form-group row view-customer-shedule">
<label for="job_no" class="col-form-label">Job</label>
<div class="col-sm-4">
<v-select v-model="selected" :on-change="onChange" :options="equipment" label="job_number" id="sale" @search="onSearch" >
</v-select>
</div>
<button type="button" @click="readHistory" class="btn btn-primary">Retrieve</button>
<button class="btn btn-primary" @click="clearFilter">Reset</button>
<div class="col-sm-2">
</div>
</div>
</div>
<div class="col-md-12" v-if="selectedEquipment">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Model Number</label>
<div class="col-sm-4">
<label v-html="selectedEquipment.model_no" class="col-form-label"></label>
</div>
<label class="col-sm-2 col-form-label">Date of Installation</label>
<div class="col-sm-4">
<label v-html="selectedEquipment.installation_date" class="col-form-label"></label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Customer Name</label>
<div class="col-sm-4">
<label class="col-form-label" v-html="selectedEquipment.technical_customer.name"></label>
</div>
<label class="col-sm-2 col-form-label">Location</label>
<div class="col-sm-4">
<label v-html="selectedEquipment.location" class="col-form-label"></label>
</div>
</div>
</div>
<table class="table table-bordered">
<thead class="cf">
<tr>
<th scope="col">Year</th>
<th scope="col">Serial No</th>
<th scope="col">job_number</th>
<th scope="col">Due Date</th>
<th scope="col">Service Type</th>
<th scope="col">Invoice No</th>
<th scope="col">Invoice Date</th>
<th scope="col">Payment</th>
<th scope="col">Invoice Value</th>
<th scope="col">Actions</th>
</tr>
</thead>
<template v-for="(equipment) in equipments">
<tbody v-for="(item , index) in equipment.maintenance" >
<tr v-if="first_year == moment(item.due_date).format('YYYY')">
<td>{{index == 0 ? moment(item.due_date).format('YYYY'): ' '}}</td>
<td><span>{{equipment.serial_number}}</span></td>
<td><span>{{item.job_number}}</span></td>
<td><span>{{item.due_date}}</span></td>
<td>
<span v-if="item.type == 1">Repair</span>
<span v-else-if="item.type == 2">PM</span>
<span v-else>Upgrade/NFC</span>
</td>
<td>{{item.invoice_no}}</td>
<td>{{item.invoice_date}}</td>
<td>
<span v-if="item.payment_status == 1">Paid</span>
<span v-else="">Pending</span>
</td>
<td>{{item.invoice_value}}</td>
<td>
<router-link onclick="topFunction()" :to="{name:'maintenanceView', params: { id: item.id , equipment: item.equipment_id }}"
title="View" class=" btn btn-view" target="_blank">
<i class="fa fa-eye sky-fa"></i>
</router-link>
</td>
</tr>
<tr v-else style="border-top: 8px solid #dedede">
<td>{{moment(item.due_date).format('YYYY')}}</td>
<td><span>{{equipment.serial_number}}</span></td>
<td><span>{{item.job_number}}</span></td>
<td><span style="display: none;">{{setFirstYearVariable(item.due_date)}}</span><span>{{item.due_date}}</span></td>
<td>
<span v-if="item.type == 1">Repair</span>
<span v-else-if="item.type == 2">PM</span>
<span v-else>Upgrade/NFC</span>
</td>
<td>{{item.invoice_no}}</td>
<td>{{item.invoice_date}}</td>
<td>
<span v-if="item.payment_status == 1">Paid</span>
<span v-else="">Pending</span>
</td>
<td>{{item.invoice_value}}</td>
<td>
<router-link onclick="topFunction()" :to="{name:'maintenanceView', params: { id: item.id , equipment: item.equipment_id }}"
title="View" class=" btn btn-view" target="_blank">
<i class="fa fa-eye sky-fa"></i>
</router-link>
</td>
</tr>
<tr v-if="equipment.maintenance.length == 0">
<td colspan="9" class="text-center">
No Data Found
</td>
</tr>
</tbody>
</template>
</table>
<div class="box-footer clearfix">
</div>
</div>
</div>
</div>
<div class="loader" v-bind:hidden="loading">
<img :src="'img/loading3.gif'" alt="Loading..." >
</div>
</div>
</div>
</div>
</div>
</template>
调用以下方法加载数据：
<script>
import paginationComponent from '../../paginationComponent.vue';
import SpareParts from "./spare_parts.vue";
export default {
data(){
return{
form: new Form({
equipment_id:'',
}),
maintenanceData: {
current_page: 1
},
equipments: [],
count: {
type: Number,
default: 0,
},
selectedEquipment:'',
loading:false,
serial_number:'',
selected:'',
search:'j',
equipment:[],
equipment_count:0,
colorCount:1,
maintenance_id:'',
first_year: '',
loading: true,
}
},
mounted(){
this.form.equipment_id = this.$route.params.equipment || '';
this.readHistory()
},
components:{
AmasirSpareParts,
'pagination-component' : paginationComponent,
},
methods:{
readHistory(){
this.loading = false;
this.form.get('technical/maintenance/history-new?equipment='+this.form.equipment_id+'&maintenance='+this.maintenance_id+'&type='+this.search)
.then(Response => {
this.equipments = Response.maintenance;
this.loading = true;
if (Response.maintenance[0]) {
this.first_year = moment(Response.maintenance[0].maintenance[0].due_date).format('YYYY');
}
})
.catch(Errors => {});
},
retrieve(){
},
onSearch(search) {
this.form.fetch('/technical/maintenance/search-history?q='+search+'&type='+this.search+'&equipment='+this.form.equipment_id)
.then(Response =>{
this.equipment = Response.equipment;
})
.catch(Errors => {});
},
onChange(obj) {
if(obj !== null){
if(this.search === 's'){
this.form.equipment_id = obj.id;
this.selectedEquipment = obj;
}else{
this.maintenance_id = obj.id;
this.selectedEquipment = obj.equipment;
}
this.selected = obj;
}else{
this.selectedEquipment = null;
this.form.equipment_id = null;
this.maintenance_id = null;
}
},
firstItem(item, name){
if(item.length)
return item[0][name];
},
trColor(index){
let reminder = (index ) % 3;
return reminder == 0 ? 'history-color-0' : reminder == 1 ? 'history-color-1' : 'history-color-2';
},
dateCal(start, end){
let starts = moment(start);
let ends = moment(end);
let diff = ends.diff(starts, 'years');
let year = diff >= 0 ? this.ordinal_suffix_of(diff+1) : '-';
return year+' year';
},
ordinal_suffix_of(i) {
const j = i % 10, k = i % 100;
if (j === 1 && k !== 11) {
return i + "st";
}
if (j === 2 && k !== 12) {
return i + "nd";
}
if (j === 3 && k !== 13) {
return i + "rd";
}
return i + "th";
},
setFirstYearVariable(date){
this.first_year = moment(date).format('YYYY');
},
moment: function (date) {
return moment(date);
},
clearFilter(){
window.location.reload();
},
},
}
</script>
有人可以指出我在这里做错了什么吗？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？