我有一个循环的数据，就像我对学生进行教育一样，它有多行。我需要用自己的表格更新每一行。所以我要做的是遍历数据 附有代码段 我想要的是，如果我根据该国家/地区更改任何国家/地区，则它将更改阶段，但仅针对该行。现在，如果我删除索引并使用常规属性，它将对所有其他形式起作用。
如果我只有1个独立设备，则可以正常工作。但不是循环
请帮助我
如您所见，我使用表单数组进行了尝试。但不起作用
const InternshipRepository = RepositoryFactory.get('internships');
export default {
name: "Internships",
props:[
'userinternships',
'dropdownData'
],
data() {
var date = (rule, value, callback) => {
if (value === '' || value == null) {
callback(new Error('Please enter your cell phone number.'));
}
else
{
callback();
}
// console.log(rule.format, fecha.format(value, rule.format));
};
return {
ruleForm: {
job_title: '',
employer: '',
country_value: '',
state_value: '',
city_value: '',
date1: '',
date2: '',
intern_id:'',
value1: true,
country_data: [],
state_data: [],
city_option: [],
},
rules: {
job_title: [
{ required: true, message: 'Please input job title', trigger: 'blur' },
{ min: 3, max: 35, message: 'Length should be 3 to 5', trigger: 'blur' }
],
employer: [
{ required: true, message: 'Please input employer', trigger: 'blur' },
{ min: 3, max: 35, message: 'Length should be 3 to 5', trigger: 'blur' }
],
country_value: [
{ required: true, message: 'Please select country', trigger: 'change' }
],
state_value: [
{ required: true, message: 'Please select state', trigger: 'change' }
],
city_value: [
{ required: true, message: 'Please select city', trigger: 'change' }
],
date1: [
{ validator: date, format: 'yyyy-MM-dd', type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ validator: date, format: 'yyyy-MM-dd',type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
]
}
};
},
mounted: function () {
this.$watch('userinternships', function () {
console.log('a thing changed')
let arr = [];
for(var index = 0 ; index < this.userinternships.data.length ; index++){
arr[index] = {
intern_id:'',
job_title: '',
employer: '',
country_value: '',
state_value: '',
city_value: '',
date1: '',
date2: '',
value1: false,
country_data: [],
state_data: [],
city_option: [],
};
}
this.ruleForm = arr;
}, {deep:true})
},
created () {
console.log("i am here");
// this.ruleForm.country_data = this.dropdownData.country.data;
let arr = [];
if(this.userinternships.success) {
for (var index = 0; index < this.userinternships.data.length; index++) {
arr[index] = {
job_title: '',
intern_id:'',
employer: '',
country_value: '',
state_value: '',
city_value: '',
date1: '',
date2: '',
value1: false,
country_data: this.dropdownData.country.data,
state_data: [],
city_option: [],
};
}
this.ruleForm = arr;
}
},
methods: {
async addBlankRecord (fd) {
this.isLoading = true
const { data } = await InternshipRepository.createBlankInternship(fd);
this.isLoading = false;
this.userinternships.data = data.data;
this.userinternships.success = true;
console.log( data.data);
return data;
},
addRecord() {
var fd=new FormData();
fd.append("job_title",'');
fd.append("employer",'');
fd.append("country",'');
fd.append("city",'');
fd.append("state",'');
fd.append("date1",'');
fd.append("date2",'');
this.addBlankRecord(fd);
},
async fetchState (index,formindex) {
console.log(formindex);
console.log(index,"index");
this.isLoading = true
const { data } = await utilityRepository.getState(formindex)
this.isLoading = false
this.state_data[index] = data;
},
async fetchCity (index,formindex) {
console.log(formindex);
this.isLoading = true
const { data } = await utilityRepository.getCity(formindex)
this.isLoading = false
console.log(data);
this.city_option[index] = data;
},
updateDropdowns(index, $event) {
console.log($event);
this.fetchState($event);
},
updateCityDropdowns(index, $event) {
this.fetchCity($event);
},
submitForm(formName,index) {
this.$refs[formName][0].validate((valid) => {
if (valid) {
var fd=new FormData();
fd.append("intern_id",this.ruleForm[index].intern_id);
fd.append("job_title",this.ruleForm[index].job_title);
fd.append("employer",this.ruleForm[index].employer);
fd.append("country",this.ruleForm[index].country_value);
fd.append("city",this.ruleForm[index].city_value);
fd.append("state",this.ruleForm[index].state_value);
fd.append("date1",this.ruleForm[index].date1);
fd.append("date2",this.ruleForm[index].date2);
InternshipRepository.createPost(fd);
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}<template>
<div v-if="userinternships.success">
<div v-for="inter,index in userinternships.data">
<el-collapse accordion>
<el-collapse-item name="inter.internShipID">
<template slot="title">
{{inter.job_title}} - {{inter.employer_name}}
<el-tooltip class="item" effect="dark" content="Move Down" placement="top">
<i class="abslocation iconbottom header-icon el-icon-bottom"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Move Up" placement="top">
<i class="abslocation icontop header-icon el-icon-top"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Delete" placement="top">
<i class="abslocation header-icon el-icon-delete"></i>
</el-tooltip>
</template>
<div>
<el-form :model="ruleForm[index]" :rules="rules" :ref="`ruleForm${index}`" label-position="top" class="demo-ruleForm">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item class="abctest" label="Job Title" prop="job_title">
<el-input v-model="ruleForm[index].job_title = inter.job_title"></el-input>
<el-input v-model="ruleForm[index].intern_id = inter.internShipID" type="hidden"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Employer" prop="employer">
<el-input v-model="ruleForm[index].employer = inter.employer_name"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="Start & End Date" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="Pick a date" v-model="ruleForm[index].date1 = inter.start_date" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="Pick a date" v-model="ruleForm[index].date2 = inter.end_date" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="abctest" label="Country" prop="country_value">
<el-select class="abctest" v-model="ruleForm[index].country_value = inter.country_id" clearable placeholder="Country" @change="updateDropdowns($event,index)">
<el-option
v-for="item in ruleForm[index].country_data"
:key="item.country_id"
:label="item.country"
:value="item.country_id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="State" prop="state_value">
<el-select class="abctest" v-model="ruleForm[index].state_value" clearable placeholder="State" @change="updateCityDropdowns(index, $event.target.selectedIndex)">
<el-option
v-for="item in ruleForm[index].state_data"
:key="item.state_id"
:label="item.state"
:value="item.state_id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="City" prop="city_value">
<el-select class="abctest" v-model="ruleForm[index].city_value" clearable placeholder="City">
<el-option
v-for="item in ruleForm[index].city_option"
:key="item.city_id"
:label="item.city"
:value="item.city_id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24" class="columnleft">
<el-switch
v-model="ruleForm[index].value1 = inter.is_working == 1 ? true : false"
active-text="Currently Working Here"
inactive-text="">
</el-switch>
</el-col>
</el-row>
<el-form-item class="buttonposition">
<el-button type="primary" @click="submitForm('ruleForm'+index,index)">Create</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
<el-row :gutter="20">
<el-col :span="24" class="boderdashed">
<el-button type="primary" icon="el-icon-plus" @click="addRecord">Add Internship</el-button>
</el-col>
</el-row>
</div>
</template>