Vue3 实际项目踩坑+总结【汇总篇】

小草莓蹦蹦跳

已于 2023-04-13 15:54:20 修改

阅读量1.6k

点赞数 1

分类专栏： Vue3.x 文章标签： vue.js javascript 前端

于 2021-03-10 15:33:29 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/112542660

版权

Vue3.x 专栏收录该内容

62 篇文章 5 订阅

订阅专栏

1、基础篇

2、组件篇

3、在子页面更改全局样式不生效？

4、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance.

5、遍历提示错误 'v-model' directives cannot update the iteration variable itself

6、input 每次输入一个字符后自动失去焦点

7、引入防抖和节流提升性能

8、实现全局的合并请求loading

9、v-model 变更

10、vue-cli 4.x 配置 htmlWebpackPlugin.options.title

20、Vue3 和 Vue2 在编写代码中的区别

21、报错

1、基础篇

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

2、组件篇

Vue3+ Vue-cli (2) 组件篇_小草莓蹦蹦跳的博客-CSDN博客

3、在子页面更改全局样式不生效？

在子页面中，更改全局样式，加上 !important 依旧不生效的原因？

1、去掉 style 标签的 scoped 属性

2、重点！！在写全局样式的时候，当前声明的局部样式表必须不能为空

只有这样子，更改全局样式才能生效

4、表单初始化数据提示 Property "xxx" was accessed during render but is not defined on instance.

在确保初始化数据没问题的情况下，浏览器提示如下：

出现问题竟然是，初始化表单命名的问题。

把 ruleForm 改成 formData 或者其它的，就可以了。。。

5、遍历提示错误 'v-model' directives cannot update the iteration variable itself

            <template v-for="item in formData.serviceList" :key="item + '1'">
                <div class="flex-row-start ip-list">
                    <el-input placeholder="请输入IP和端口" class="mr10" v-model.trim="item"></el-input>
                </div>
            </template>

解决方案：

            <template v-for="(item, index) in formData.serviceList" :key="item + '1'">
                <div class="flex-row-start ip-list">
                    <el-input placeholder="请输入IP和端口" class="mr10" v-model.trim="formData.serviceList[index]"></el-input>
                </div>
            </template>