Одним из возможных решений было бы использовать события @focus и @blur, чтобы проверить, имеет ли form.name значение перед увеличением или уменьшением, это будет срабатывать при фокусе или событиях размытия, поэтому у вас не будет методов запускается при каждом вводе или удалении символа.
например:
<el-form-item label="Product name *">
<el-input @focus="checkName" @blur="checkName" v-model="form.name"></el-input>
</el-form-item>
methods: {
checkName() {
//If form.name has a value then run increase method, otherwise run decrease method
!!this.form.name ? this.increase() : this.decrease()
},
increase() {
this.percentage += 8.3;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 8.3;
if (this.percentage < 0) {
this.percentage = 0;
}
},
}
Вы можете увидеть рабочую скрипку ЗДЕСЬ
ОБНОВЛЕНИЕ
Хорошо, я следовал правилам, которые вы указали в своем вопросе, и я не знал, что вы хотите получить процент заполнения формы, поэтому для этого я бы предложил используйте вычисляемое свойство, вы можете узнать больше о вычисленных свойствах в VueJS Документации , таким образом процент вычисляется на основе критериев, которые мы можем дать ему, и только если форма имеет значения.
computed: {
formProgress: function () {
let totalInputs = Object.keys(this.form).length;
let filledInputs = 0;
Object.values(this.form).forEach(val => {
if (!!val){
filledInputs++;
}
});
return (filledInputs/totalInputs)*100
}
},
Как вы можете видеть в одном вычисляемом свойстве, вы можете обрабатывать сложные logi c и возвращать значение реактивно, чтобы лучше объяснить, я считаю длину объекта формы, чтобы получить ge t общее количество входов в вашей форме, поэтому важно, чтобы все данные вашей формы находились внутри объекта данных формы, затем я конвертирую этот объект в массив для его итерации, и я проверяю, имеет ли каждое свойство значение на нем, если оно Я добавляю 1 к счетчику filledInputs и, наконец, просто возвращаю простую математику, чтобы получить процент. пожалуйста, проверьте новую скрипку здесь, чтобы увидеть ее в действии:
FORM PROGRESS FIDDLE
Если у вас есть другие сомнения, просто дайте мне знать.
ОБНОВЛЕНИЕ 2:
Хорошо, чтобы подсчитывать только указанные c входы для прогресса формы, я изменил код для работы на основе массива, который содержит имена свойства, которые требуются. вот полный код:
data() {
return {
form: {
name: '',
lastName: null,
categories: [{}],
},
requiredFields: ['name', 'categories']
};
},
computed: {
formProgress: function () {
let totalInputs = this.requiredFields.length;
let filledInputs = 0;
Object.entries(this.form).forEach(entry => {
const [key, val] = entry;
if (this.requiredFields.includes(key)){
switch (val.constructor.name) {
case "Array":
if (val.length !== 0){
if (Object.keys(val[0]).length !== 0){
filledInputs++;
}
}
break
case "Object":
if (Object.keys(val).length !== 0){
filledInputs++;
}
break
default:
if (!!val){
filledInputs++;
}
}
}
});
return Number((filledInputs/totalInputs)*100).toFixed(1)
}
},
А вот обновленный FIDDLE
Как вы можете видеть, теперь я использую Object.entries для получения ключа и значение объекта формы, поэтому у вас может быть один объект формы для отправки на ваш бэкэнд, таким образом я сначала проверяю, находится ли ключ в обязательных полях, и имеет ли значение, поэтому все, что вам нужно сделать, это обновить массив данных requiredFields с теми же именами, что и ваше свойство данных input, чтобы проверка работала, также существует проверка в зависимости от того, является ли это массивом, массивом объектов или объектом, таким образом он будет проверять ввод для каждого типа данных.
Надеюсь, это сработает для вас.