Vuejs跟踪输入字段

Question

我需要检查我的输入字段是否为空。

逻辑

1. 如果form.name有值，则使用递增函数
2. 如果form.name为空，则使用递减函数
3. 不要对用户输入或删除的每个字符使用increase、decrease函数

代码

<el-form-item label="Product name *">
<el-input v-model="form.name"></el-input>
</el-form-item>

methods: {
increase() {
this.percentage += 8.3;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 8.3;
if (this.percentage < 0) {
this.percentage = 0;
}
},
}

知道吗

更新

Script

data() {
return {
form: {
name: '', // require
slug: '',
price: '', // require
supplier_id: '', // require
new_price: '',
base_price: '',
sku: '',
qty: 1, // require
active: '', // require
photo: '',
photos: [],
shortDesc: '',
longDesc: '',
origin: '',
tags: [],
brand_id: '', // require
categories: [],
user_id: '',
seoTitle: '',
seoTags: '',
seoPhoto: '',
seoDescription: '',
variations: [],
options: [],
condition: '', // require
isbn: '',
ean: '',
upc: '',
height: '',
weight: '',
lenght: '',
width: '', // require
},
}
},
methods: {
onSubmit(e) {
e.preventDefault();
axios.post('/api/admin/products/store', this.form)
.then(res => {
// do my things
})
.catch(function (error) {
console.log('error', error);
});
},
}

HTML

<el-form ref="form" :model="form" label-width="120px" enctype="multipart/form-data">
// my inputs (listed in form part in script above)
<el-button type="primary" @click="onSubmit" native-type="submit">Create</el-button>
</el-form>

Answer 1

一种可能的解决方案是使用@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
}
},

正如你在一个单独的计算属性中看到的那样，你可以处理复杂的逻辑并反应性地返回值，为了更好地解释它，我正在计算表单对象的长度，以获得表单中的输入总数，所以将所有表单数据都放在表单数据对象中很重要，然后我将该对象转换为数组来迭代它，我检查每个属性是否都有一个值，如果有，我在filledInputs计数器上加1，最后只返回一个简单的数学表达式来获得百分比。请在这里查看新的Fiddle，看看它的作用：

形式进度小提琴

如果你还有其他疑问，请告诉我。

更新2:

好吧，为了只计算表单进度的特定输入，我修改了代码，使其基于包含所需属性名称的数组工作。这是完整的代码：

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来获取表单对象的键和值，这样你就可以有一个表单对象发送到你的后端，通过这种方式，我首先检查键是否在必需的字段中，以及是否有值，所以你所需要做的就是用与你的inputs数据属性相同的名称更新requiredFields数据数组，以使验证生效，还有一个验证取决于是数组、对象数组还是对象，这样它将验证每个数据类型的输入。

希望这对你有用。