Vue + Flask + MySQL——错误记录

记录

因为把整个项目迁移到另一台电脑上了，所以虚拟环境和vue的环境要重新配置。
写前端的时候css不会渲染，不知道怎么设计类似问卷星的页面。然后惊喜地发现了fish-ui，就利用了form的结构。但是这个过程中，遇到了一个很大的问题，就是v-model绑定数组数据的坑，页面上数组数据改变的时候，前端的脚本根本就检测不了（不是立即检测到），整个页面的可操作性真的很差。
另一个问题是，我有一个接口，用来查询数据库表的大小，然后向数据库插入一条数据。因为需要循环调用这个接口，就会有这样的问题：只有第一条数据能够插入。

问题描述1：

我用v-model绑定了数组数据，想在第一个for循环里面通过改变"Q选项数量q_list[count].num"这个变量，形成第二个for循环的边界。
但是实际过程中，我点击按钮使q_list[count].num变化，页面的for循环没有起作用。但是这里要注意，数据的确发生了变化。
页面绑定的代码：

        <div v-for="count of setq_q_num" :key="count"> 
            <fish-fields>
                <fish-field label="Q问题描述" span="15" name="q_title" :rules="[{ required: true, message: 'not empty'}]">
                    <fish-input v-model="q_list[count].des"></fish-input>
                </fish-field>
                <fish-field label="Q选项数量" span="2" name="q_num" :rules="[{ required: true, message: 'not empty'}]">
                    <fish-input-number min="-1" max="30" v-model="q_list[count].num"></fish-input-number>
                </fish-field>
            </fish-fields>
            <div v-for="count1 of q_list[count].num" :key="count1"> 
                <fish-field label="option" span="10" name="q_ans" :rules="[{ required: true, message: 'not empty'}]">
                    <fish-input span="10" v-model="q_list[count].ans_list[count1]"></fish-input>
                </fish-field>
            </div>  
        </div>

---

解决方案：

查了很多解决方法，主要有两类：

第一种：watch监听

    watch:{
        //监听
        'setq_pf' : {
            handler(){
                this.setq_b = this.setq_pf * 2;
            }
        },
        'setq_b' : {
            handler(){
                this.setq_pf = this.setq_b / 2;
            }
        }
    },

第二种：将数组数据初始化

this.$set(this.q_list,i,{ num: 0, des: '',ans_list: []});

参考图片：

问题描述2：

循环调用接口，疯狂失败。

---

解决方案：

链接1：方法参考
如果要去将一批数据发送到服务器，只有前一批发送成功（即服务器返回成功的响应），才开始下一批数据的发送，否则终止发送。这就是一个典型的 “for 循环中存在相互依赖的异步操作” 的例子。
了解到三个元素：let、async、await。
链接2：了解async函数