开发、解决问题的思路总结

刺骨的言语ヽ痛彻心扉 2023-06-30 01:51 56阅读 0赞

# 解决问题的思路 #

# 前言 #

是因为遇到了下面这个问题，导致我觉得我有必要把自己解决问题的思路一点一滴的记录下来，一来加强记忆，二来备忘，三来就是想把从现在开始关于`开发、解决问题思路`的都记录在这里。  
通过对这个问题的思考和解决方案的探究来做这个总结。

# 情况 #

要把项目中`可搜索的多选-选择器`改为`可创建条目的多选选择器`，如下，对！就是用的element UI库。  
**可搜索的多选-选择器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]  
**可创建条目的多选选择器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

# 问题 #

其他表单验证都可以通过，唯独`可创建条目的多选选择器`这个表单，有时候可以通过，有时候通不过。

# 思路 #

**1.用element ui单独写一个不嵌套组件表单，测试element ui原生的表单会不会出现这个问题**  
有这个想法的时候我就立马写了一个不嵌套组件表单，发现在这里没有出现我遇到的问题，同时我也确定了我那个我原本写的那个`可创建条目的多选选择器`的数据绑定上的数据类型是没有问题的。  
为什么没有说`数据绑定`没有问题？因为我感觉就是因为数据绑定的问题导致我的表单验证有时候会通不过。  
我刚开始以为，绑定的表单对象里，再直接绑定一个数组会有问题，这个bug已经把我搞得晕头转向了。所以我把那个组件的数据绑定到表单对象外，然后通过监听表单对象外的数据变化来同步表单里的数据。这样写没有问题。  
紧接着，我又试了一下，发现根本不用这么搞，绑定的表单对象里再直接绑定一个数组没有问题啊！所以注释掉并修改了数据绑定，表单验证正常。  
**2.换一种表单验证的写法**

# 总结 #

## 1.遇到不好解决的问题，要抓住本质，不要瞎搞 ##

**这是我的第一个思维误区，很致命！**  
遇到问题的第一时间，我没有从组件本身去找问题，而是围着实例一直看，**本质是组件里的element控件啊**,所以后面才开始从组件出发，通过组件到实例的分析掌握了大部分思路。  
**要警戒！**

## 2.不要执拗的非要一头撞到南墙上才行，条条大路通罗马，非要解决这个问题达到目的才算达到目的吗？换个方法也能达到目的，为什么不用？ ##

**你是觉得你在可以一直浪费时间？你都没想过你这么长时间还解决不要一个问题，别人不会怀疑你的能力？**  
**这个潜在思维和想法会让你走向深渊！**  
`表单验证就非要这样写吗？为什么不看看还有没有其他写法？`  
去看了一下，有吗？  
有啊！  
无语，为什么不早点就换种方法写表单验证？这个问题不久早就解决了？

# 反馈 #

**情况**  
问题已解决。  
方法：使用element 表单的`自定义验证规则`对控件进行表单验证。  
把项目代码改成纯element表单，重写了一遍，点我跳转到代码处。  
**出现这个问题的根源**  
其实在自定义验证规则的时候其实可以用方法里的参数`value`，但是问题就在这个参数`value`上，这个value按说是绑定的表单数据，但是这个数据同步是有问题的，导致有时候表单控件绑定的数据有值，但是这个参数`value`却为空，就是这个原因导致的我有时候表单验证能通过，有时候通过不了。。  
好坑~  
code

<template>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
          <el-form-item label="可添加条目" prop="multi">
            <el-select v-model="ruleForm.multi" multiple filterable allow-create default-first-option placeholder="请选择文章标签" >
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <script> export default { data() { var validatePass = (rule, value, callback) => { if (this.ruleForm.multi.length >= 1) { callback(); } else { callback(new Error("请输入中医证型")); } }; return { options: [ { value: "HTML", label: "HTML" }, { value: "CSS", label: "CSS" }, { value: "JavaScript", label: "JavaScript" } ], ruleForm: { multi: [], checkPass: "", age: "" }, rules: { multi: [{ validator: validatePass, trigger: "blur" }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200113220208709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020011322013959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70