In Vue projects, you need to reference third-party libraries, such as vant@^2.12.47. When using the dialog popup component, you need to use v-model:show to determine whether to display the popup.
When the project is running, an error will be reported: error ‘v-model’ directives require no argument vue/valid-v-model
Solution: Add:'vue/valid-v-model':'off' in the root directory, .eslintrc.js file.
As shown in the figure:
Error reporting information
ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true& Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent’)
Delete the NumberInfo folder under the components folder, start the project again, and after starting, Ctrl + z to withdraw the deleted NumberInfo component folder, after which the project will start normally
Solution:
1. Delete, yarn run serve to start project
2. Withdrawal
3. Project started successfully
make report an error as below:
“fontconfig-2.12.1/src/fcmatch.c:324:63: error: ‘PRI_CHAR_WIDTH_STRONG’ undeclared here (not in a function); did you mean ‘PRI_WIDTH_STRONG’?”
"fontconfig-2.12.1/src/fcmatch.c:324:63: error: ‘PRI_CHAR_WIDTH_STRONG' undeclared here (not in a function); did you mean ‘PRI_WIDTH_STRONG’?"
Solution:
Enter the source code directory. My path is
1.
fontconfig-2.12.1/fontconfig/fontconfig.h
Found #define FC_CHAR_WIDTH “charwidth” /* Int / deleted
Add #define FC_CHARWIDTH “charwidth” / Int */
#define FC_CHAR_WIDTH FC_CHARWIDTH
2.
fontconfig-2.12.1/src/fcobjs.h
Find FC_OBJECT (CHAR_WIDTH, FcTypeInteger, NULL) and delete it.
Add FC_OBJECT (CHARWIDTH, FcTypeInteger, NULL)
3.
fontconfig-2.12.1/src/fcobjshash.gperf
Find “CHARWIDTH”, FC_CHAR_WIDTH_OBJECT and delete it.
Add “charwidth”,FC_CHARWIDTH_OBJECT
4.
fontconfig-2.12.1/src/fcobjshash.h
Find {(int)(long)&((struct FcObjectTypeNamePool_t *)0)->FcObjectTypeNamePool_str45,FC_CHAR_WIDTH_OBJECT}, delete
add {(int)(long)&((struct FcObjectTypeNamePool_t *)0)->FcObjectTypeNamePool_str45,FC_CHARWIDTH_OBJECT},
End, make && make install successful
is to modify and replace a few macro definitions, you can happily edit cairo!
Although the high version of fontconfig does not have this error, but the cross-compiler reported that the other failed to solve
<template>
<component
ref="formComponent"
:is="formComponent"
/>
</template>
<script setup lang='ts'>
const mapComp: any = {
Record
};
const formComponent = computed(() => {
return mapComp[route.params.type as keyof typeof mapComp];
});
</script>
Then the browser reports two warnings
After modification:
<template>
<component
ref="formComponent"
:is="mapComp[route.params.type as string]"
/>
</template>
<script setup lang='ts'>
import {useRoute} from 'vue-router'
const route = useRoute()
const mapComp: any = {
Record
};
const formComponent = ref<string>(route.params.type as string);
</script>
At this point, the problem is solved
Today, I want to realize the lazy loading of pictures. After registering components according to the tutorial, the console will report an error as above
The version in package.json is found to be the default downloaded version 3.0.0-rc.2
Solution:
Try to modify the version to 1.3.3
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"vue-lazyload": "^1.3.3",
"vue": "^2.6.14",
"vue-router": "^3.1.3"
},
Run, no more errors!
[Vue warn]: Invalid prop: custom validator check failed for prop “index“
Foreword: I am watching the background management project of bilibili, the error reporting problems encountered and the solutions
report errors:
Original code:
Modification code:
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
>
<el-menu-item
v-for="item in noChildren"
:index="item.path"
:key="item.path"
>
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<el-submenu
v-for="item in hasChildren"
:index="item.path + ''"
:key="item.path"
>
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{ item.label }}</span>
</template>
<el-menu-item-group
v-for="(subItem, subIndex) in item.children"
:key="item.path"
>
<el-menu-item :index="subIndex + ''">{{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
[Vue warn]: Invalid prop: custom validator check failed for prop “navigationBarTextStyle“.
uniapp,h5 interface report an error:
“globalStyle”: {
“navigationBarTextStyle”: “white”,
“navigationBarTitleText”: “uni-app”,
“navigationBarBackgroundColor”: “#ffaaff”,
“backgroundColor”: “#00ff00”,
“enablePullDownRefresh”: true,
“backgroundTextStyle”: “light”
}
Reason & Solution:
The navigationBarTextStyle property can only be filled with white or black, not with hexadecimal
Project scenario:
In the process of testing 3D effects, there was a problem with vite suddenly. I found many methods on the Internet and didn’t know where the problem was.
Problem description
This is the error code of VSC. The error code running on HBx is different from this.
Solution:
Use after downloading yarn
yarn install
After reinstalling the dependency, you can run it
I don’t know why, because NPM run serve will also fail to get after vite is packaged
npm run build
npm run serve
You can build first and then serve.
When I first came into contact with webpack, I encountered several problems. After successfully installing the latest version of webpack and cli, there was a problem with the first package. In fact, it was also a syntax error
When running webpack .\src\main.js .\dist\bundle.js and packaging, the following error occurs:
Cause of error:
The latest version of the webpack command has changed
Solution:
Add a -o to the previous command.
run webpack .\src\main.js -o .\dist\bundle.js
When installing quill with command npm i react-quill, there is an error and can not been installed. 
Solution:
check your own node version. If it is the latest version, use some older versions of node. Here, version 12.14.1 is used. Use npm i react-quill to install again.
Using the project developed by HBuilderX, WeChat develop tool report an error:
Cannot read property ‘forceUpdate’ of undefined
The solution is shown in the figure:
In the project directory, find manifest.json – WeChat applet configuration – configure “WeChat applet AppID”
Open the developer tool, view the corresponding appid, fill in the upper part, and refresh the developer tool.
If you continue to report this error, restart hbuildx and wechat developer tools after configuration, and re run the project.
Reason: the installed version of core-js is too old and needs to be replaced with a newer version.
Solution:
1 Delete original version
npm rm -rf node_modules
2. install the latest version
npm install core-js@latest
Note:
you cannot directly install a new version. You must first delete the original version dependency, and then install a new version to avoid errors!