This error is always reported when using vuex: error in created hook: “typeerror: cannot read property ‘commit’ of undefined”
It was found that the global store was not introduced in main.js
import store from ‘store/store.js’
const app = new Vue({ …App, store })
Record it here and remind yourself to remember
Problem description
When using wangeditor, input content, and press enter to switch to the next line, the cursor cuts over and automatically jumps back.
Cause of the problem
After encapsulating a component, the onchange event of wangeditor will be triggered every time the content passed in from the parent is used. In the onchange event, the modified value is assigned to the parent component by passing the child to the parent. After the value of the parent component changes, the value of the child component wangeditor will also be modified. Therefore, the cursor always jumps to the last. At this point, there is another problem of concurrency, that is, it is invalid after the undo and resume click.
Solution
When the child component watch listens to the value passed in by the parent component, it adds judgment to ensure that the input content is zero and the assignment will not be triggered
Instead of using the official recommended catchdata, the child component uses the method of passing the value to the parent component (that is, $emit) to synchronize the value to the parent component, so as to ensure that the value of the parent component is consistent with the content of the rich text when saving
if it can help you, please use your little hand to like it
thank you.
The webPack configuration file cannot be found in the project created by Ue-CLi 3.0, because it is encapsulated by Ue-CLi 3.0. You only need to modify it in the vue.config.js file in the root directory of the project (if the project does not have this file, add one directly in the root directory), and set the baseUrl value to ‘./ ‘, and modify as follows
const webpack = require("webpack");
module.exports = {
pluginOptions: new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
}),
baseUrl: './' // ADD these codes
};Cli2.x Solutions:
Open config/index.js file and build-> AssetsPublicPath is changed to “./ “, which is preceded by a dot.
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // Here
}Ok, 2. X 3.0 is all done
Please indicate the source of the reprint
//Get the height of the status bar by reflection, the return is the height of the status bar
public int getStatusHeight(){
try {
Class<?> c = Class.forName("com.android.internal.R$dimen");
Object o = c.newInstance();
Field field = c.getField("status_bar_height");
int x = (int) field.get(o);
return mContext.getResources().getDimensionPixelOffset(x);
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
new
ExtractTextPlugin({
// filename: assetsPath(‘ CSS /[name].[Contenthash]. CSS ‘),// the original configuration
filename:
utils
.
assetsPath
(
‘[name]/styles.[contenthash].css’
),
//
The changes
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It’s currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it’s `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks:
true,
}),
And then it’s ok
The reason for this is not clear from the Github forum. If you are interested in what appears to be a plugin patch, check it out
Question:
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"Reason ref:
Check that the REF in the form in the code is consistent.
The following error occurred while running NPM Run Dev:
Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
at Function.Module._load (internal/modules/cjs/loader.js:862:27)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (D:\javaProject\vue\myvue\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\\javaProject\\vue\\myvue\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wenxindiao\AppData\Roaming\npm-cache\_logs\2020-04-22T03_06_48_257Z-debug.log
Solution:
this is because the current version of [email protected] does not support [email protected]. So simply delete the current Webpack-dev-Server folder and reinstall the higher version. The steps are as follows:
npm i –-save-dev webpack-dev-server@next
Conclusion: Find out if templent contains a script and remove it
Error: (Emitted value instead of an instance of Error)
Error compiling. template:
also has a paragraph Error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as
Reason: Error packaging vUE with elementUI for the first time
As a way to make a project of nuxt, this exception occurred. Module build failed: Error: Plugin/ prefiles are not allowed to export objects, only functions : make of the following figure:
Ii. Problem Analysis and Solution: Babel version conflict, Babel dependency package is not compatible, package.json dependency package contains both Babel 7.0 version and Babel 6.0 version, the two versions are obviously incompatible, We can upgrade to Babel 7.0 version, through NPM install [email protected] command all upgrade to Babel 7.0 version, so the conflict problem of the versions can be solved.
And give me a lesson on the cruel reality, make robeletric before it has been a problem in the environment, the beginning the whole vue and waste on the environment for so long time
I will download the latest version of the node directly, so The Times running someone else’s project is wrong, then I did not think of to see if the environment problem, and a call to find on the net, then change a lot of things, and no
this time on the Internet to see says the latest version of the node with a lot of things are not compatible, 8. A few is relatively stable, then changed 8. A few of the node and project up
to come over for a few days, when I see some other module, when start to quote for the following error:
ERROR in ./demo03/src/app.vue
Module parse failed: /vue-tutorials/06.Router/demo03/src/app.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/Downloads/vue-tutorials/06.Router/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
@ ./demo03/src/main.js 9:23-43
>
>
>
>
>
>
>
>
>
>
>
> loaders in webpack.config.js changed to rules
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}
]
webpack1.x -> Module. loaders changed the environment for module.rules
to start the project for the first time. Version conflicts seem to solve most problems!!
Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.
in my previous post
VUEJS project practice 5 Dialog pop-up box MessageBox (very nice bootstrap style)
has introduced a MesageBox style combined with bootstrap style
Then in the previous post
VUEJS project practice 4 custom keyboard instructions (keystrokes to get focus)
introduced a way for keystrokes to automatically get focus and trigger events.
Now when MessageBox binds Enter, an error
messagebox.vue?Cb02 :80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.
First post the message.vue file
<template>
<div v-key-bind-listen>
<div class="msgBox" v-show="isShowMessageBox">
<div class="msgBox_header">
<div class="msgBox_title">
<h3>{{ title }}</h3>
</div>
</div>
<div class="msgBox_content">
<p>{{ content }}</p>
</div>
<div class="msgBox_btns">
<button type="button" class="btn btn-lime btn-lg" id="confirmBtn" @click="confirm" bind_key="ENTER">确定</button>
<button type="button" class="btn btn-dark btn-lg" id="cancelBtn" @click="cancel" bind_key="ESC">取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'messageBox',
data(){
return {
title: '',
content: '',
isShowMessageBox: false,
resolve: '',
reject: '',
promise: '' // 保存promise对象
}
},
methods: {
close(state){
this.model.show = false;
if(this.model.callback){
this.model.callback(state);
}
},
// 确定,将promise断定为resolve状态
confirm: function () {
this.isShowMessageBox = false;
this.resolve('confirm');
this.remove();
},
// 取消,将promise断定为reject状态
cancel: function () {
this.isShowMessageBox = false;
this.reject('cancel');
this.remove();
},
// 弹出messageBox,并创建promise对象
showMsgBox: function () {
this.isShowMessageBox = true;
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
// 返回promise对象
return this.promise;
},
remove: function () {
setTimeout(() => {
this.destroy();
}, 300);
},
destroy: function () {
this.$destroy();
document.body.removeChild(this.$el);
}
}
}
</script>
<style scoped>
.msgBox {
position: fixed;
z-index: 4;
left: 50%;
top: 35%;
transform: translateX(-50%);
width: 420px;
background-color: black;
opacity: 0.55;
}
.msgBox_header {
padding: 20px 20px 0;
}
.msgBox_title {
padding-left: 0;
margin-bottom: 0;
font-size: 26px;
font-weight: 800;
height: 18px;
color: #fff;
}
.msgBox_content {
padding: 30px 20px;
color: #fff;
font-size: 18px;
font-weight: 200;
}
.msgBox_btns {
padding: 10px 20px 15px;
text-align: right;
overflow: hidden;
}
@keyframes show-messageBox {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bounce-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
The V-key-bind-listen instruction defined here is used for key listening. For details, please refer to the previous blog. It would be boring to write it again.
VUEJS project practice four custom keyboard commands (keys to get focus)
When you press ESC to cancel, there is no problem
when you press ENTER to confirm, the error will appear in the newspaper
messagebox.vue?Cb02:80 Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’ : The Node to be removed is not a child of this Node.
Error is located via console. 
>
add a line of logs in the destroy method. The console prints this.$el.
console.log(this.$el)
Add a line of logs to determine if this.$el is a child of the body
console.log(document.body.contains(this.$el))