Tag Archives: Vue error

[Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function

Project scenario:

Today, in the process of reviewing the basis of Vue, I tried to introduce and use Vue with traditional HTML and native memory, and then found that I really pulled it. The memory is not only vague, but also confused. Vue2 mixed with vue3 is there! Next, let’s see how to report the error.

Problem Description:

The HTML structure is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                message: '666'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    app.mount("#app")
  </script>
</html>

Good guy, 666 didn’t render. Just click and report me the error
Uncaught TypeError: Vue.createApp is not a function。
I’m still wondering. I think it’s ok if createapp creates a Vue application and mount it to the node?Why, vue.createapp is not available yet

Cause analysis:

Later, I read the document and found that I had mixed up vue.createapp and mount, which are the writing methods of vue3, but I introduced vue2
it is clearly written on the official website. Vue2 uses new and is an EL mount node
vue2 is written as follows:

 var app = new Vue({
   el: '#app',
   data: {
     message: '666',
   },
   template: '<h2>{{message}}</h2>',
});

The following is the way vue3 is written

 const app = Vue.createApp({
     data() {
         return {
             message: '666'
         }
     },
     template: "<h2>{{message}}</h2>"
 })
 app.mount("#app")

[Solved] Vue Error: Module build failed: Error: No PostCSS Config found in

Problem description
execute the NPM install command to install all dependencies, and then run NPM run dev to report an error:

error  in ./node_modules/view-design/dist/styles/iview.css

Module build failed: Error: No PostCSS Config found in: /Users/lanweihong/Code/JS/hotel-pms/node_modules/view-design/dist/styles
    at config.search.then (/Users/lanweihong/Code/JS/hotel-pms/node_modules/postcss-load-config/src/index.js:91:15)
    at <anonymous>

Solution
create a new postcss.config.js file in the project root directory. Postcss.config.js is a special processing for webpack 3.0.

postcss.config.js

module.exports = { 
    plugins: { 
      'autoprefixer': {browsers: 'last 5 version'} 
    } 
}

Rerun NPM run dev.

[Solved] Vue Error: Module build failed Error Node Sass version 6.0.1 is incompatible with ^4.0.0.

Vue error module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0. Solution

Error message:

 ERROR  Failed to compile with 1 errors                                                                                                                                      下午6:51:57
 
 error  in ./src/views/Login.vue
 
Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\utils.js:77:13)
    at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\index.js:34:59)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
Config":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
 13:3-17:5 14:22-397
 @ ./src/views/Login.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Solution:

Find the problem: module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0

This problem is caused by the high version of SASS, so just change the version to the corresponding version according to the prompt. Here, change to version 4.0.0.

Step 1: find the package.json file in the IDE:

Step 2: find sass loader and change its version to 4.0.0

Finally, execute

cnpm install

Finally, execute

cnpm install

npm run dev

[Solved] Vue Error: TypeError: Cannot read property ‘end‘ of undefined

My code:

computed: {
    handleTimestamp() {
    let endData = this.activityList[0].end
    }
}

The error message is as follows:
but when I print this.activitylist, it has value

The reason for the error here is:
the page has not rendered data at the beginning. At this time, the activitylist is still empty. Of course, you can’t get its value in the calculated method

Solution:
at the beginning of the method, judge the length of the activitylist. If it is empty, the execution will not continue. If it is not empty, the following code will be executed:

computed: {
    handleTimestamp() {
    if(!this.activityList.length) return
    let endData = this.activityList[0].end
    }
}

That’s it~~~

How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …

1. Demand and error reporting

Requirements: the scenarios are: component a refers to component B, uses V-model to pass parameters to B, B uses props: {value} to receive content, directly modifies and assigns value according to logic in B, and sees error report in browser console after event triggering, as follows:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

2. Analyze the reasons

In terms of the content of the error report, we have changed the variables of the parent component referenced in the child component, that is, the data in props; From the prompt information, is it feasible to use mutated ?In vue2, the data in the component props can only flow in one direction, that is, it can only pass props from the parent component through the component’s DOM attribute to the child component, and the child component can only passively receive the data from the parent component, and in the child component, the props data from the parent component cannot be modified. The value of props cannot be modified in the component, and the modified value will not be synchronized to the outer layer of the component, that is, the calling component does not know what the current state is inside the component

2.1 what causes this?

In the vue1. X version, the props binding modifiers twoway and . Sync can be used to realize the bidirectional data binding of props . Remove the bidirectional data binding function of props in vue2.0 . If bidirectional binding is needed, you need to implement it yourself
in vue2.0 , the data flow of component’s props is changed to only one-way flow, that is, it can only be transferred from (parent component) to (child component) through component’s v-bind: attributes , and the child component can only passively receive the data from the parent component, The props data passed by the parent component cannot be modified in the child component. Official document explanation:

Prop is unidirectional: when the properties of the parent component change, it is passed to the child component, but not vice versa. This is to prevent the child component from unintentionally modifying the state of the parent component – which makes the data flow of the application difficult to understand
although abandoning the two-way binding of props is beneficial and correct for the whole project, we do need to modify the requirements of props from within the component at some times

In vue2.0 , the following methods can be used to realize the bidirectional binding mode of component attributes (not binding, but asynchronous modification)

The V-model instruction or . Sync modifier will transfer the method of modifying attributes to the subcomponent call through v-bind . The subcomponent can directly use the method to transfer the method of modifying attributes to the subcomponent call through v-on , and use $emit() to implement callback modification or use this. $parent to modify

3. Solution: use v-on to realize the modification mode

It’s also for code readability

do not directly modify the props data passed from the parent component, redefine a variable in the data function, assign the props data value to the data variable, and then modify the data variable. As follows:

Component B accepts the parameters of component A

name: "B",
props: {
	father: {
		type: String,
		default: null
	}
}
data(){
  return{
    father_a : this.father
  }
}

If you want to listen to the variables passed in the a component to modify a data in the b component, you can use the watch listening function to listen. As follows:

name: "B",
props: {
	father: {
		type: String,
		default: null
	}
}
data(){
  return{
    father_a: this.father
    son: ''
  }
}
//Listening function, whenever the father variable passed from the parent component changes,
// the son variable defined in the child component will be assigned the value "son"
watch:{
  father(val, valOld){
    this.son = "Son"
  }
}

If b wants to modify the attributes passed by a , you can use $emit to modify the attributes

A

<B :father="a" @change="changeA" />

<script>
export default {
	name: 'A',
	data() {
		return {
			a: 'Variables of A'
		}
	}，
	methods: {
		changeA(val) {
			this.a = val
		}
	}
}
</script>

B

<script>
export default {
	name: 'B',
	props: {
		father: {
			type: String,
			default: null
		}
	},
	data() {
	},
	watch:{
	  father(val, valOld){  // Here you can also define the variable in data and assign the father to it, and monitor the variable here
	    // This is the logic that the child component needs to handle if the father variable changes
	  }
	}, the
	methods: {
		changeAFather() { // Who calls it? It's the child component's business operation
			this.$emit('change', val)
		}
	}
}
</script>

So far, the data in the child component and the data in the parent component are bound Bi directionally, and the data inside and outside the component are synchronized: when the internal component changes, the external component decides whether to change

vue1.0 data bidirectional binding is abandoned in vue2.0 version?Through the case, it can also be found that there are many bidirectional binding props codes, which is not conducive to the data state management between components, especially in complex business. It is not easy to understand and read the logic, so we try not to use this way of bidirectional binding, and use vuex for data management in too complex data processing.

Vue error resolution: TypeError: Cannot read property’_t’ of undefined”

Leave a reply

The front-end error report is as follows:
[Vue warn]: Error in render: “TypeError: Cannot read property’_t’ of undefined”

It is the compatibility problem between vue and i18n that multi-language configuration is used in the project. The solution is as follows:

Vue.use(iView)

Replace with

Vue.use(iView, {
  i18n: function(path, options) {
    let value = i18n.t(path, options)
    if (value !== null && value !== undefined) {
      return value
    }
    return ''
  }
})

Vue Error: initialize failed: invalid dom [How to Solve]

An error occurred when ecarts component was introduced into Vue project: “error: initialize failed:invalid dom. ”

I found that I didn’t reach that level at all. The problem I encountered was that I didn’t quote correctly. I split up. Xiaobai grew up in tears and blood. He didn’t talk much nonsense. Write an article and record it.

The main reason is that I didn’t understand the reference method of ecarts component. Here is my solution

<div id="a" style="height:80vh;width:100%" ref="b"></div>

There are two ways, one is Ref

let mychart = this.$echarts.init(this.$refs.b)

A way of using ID

this.$echarts.init(document.getElementById("a"))

The following is the complete code of the ecart component that I quoted. I have highlighted the mistakes I made. I hope it can help you.

<template>
  <div id="a" style="height:80vh;width:100%" ref="b"></div>
</template>
<script>
mounted() {
      this.init()

  },
 
  methods: {
      init(){
          let mychart = this.$echarts.init(this.$refs.b)
          // let mychart = this.$charts.init(document.getElementById("a"))
          //Here, I am the problem here, did not understand the whole id and ref relationship
          let optionline = {
              backgroundColor: '#f0f0f0',
    title: {
        text: 'Folding Line Chart',
        textStyle: {
            align: 'center',
            color: '#99CCFF',
            fontSize: 20,
        },
        top: '5%',
        left: 'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },
    },
    grid: {
        top: '15%',
        left: '5%',
        right: '5%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        axisLine: {
            show: true
        },
        splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: ['A', 'B', 'C', 'D', 'E', 'F'],

    }],

    yAxis: [{
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
                color: '#d1e6eb',

            },
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
            name: 'Total registration',
            type: 'line',
            // smooth: true, // whether smooth
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
                normal: {
                    color: "#6c50f3",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#6c50f3',
                }
            },
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(108,80,243,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(108,80,243,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(108,80,243, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
        },
        {
            name: 'Total registration',
            type: 'line',
            // smooth: true, // whether smooth
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
                normal: {
                    color: "#00ca95",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#00ca95',
                }
            },

            itemStyle: {
                color: "#00ca95",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,202,149,0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,202,149,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(0,202,149, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
        },
    ]
          }
          mychart.setOption(optionline)
      }
  }
</script>

Report Duplicate keys detected: ‘0’. This may cause an update error in VUE and the solution

Leave a reply

vue version: 2.x

First, Duplicate keys detected: ‘0’. This may cause an update error is an error caused by Vue finding that the key is not unique.

Translated into Chinese is probably: Duplicate key detected: ‘0’. ‘0’ may cause an update error.

There are also some other solutions found on the Internet. It is solved by manual modification :key, such as concatenating strings. Because in order to solve the problem, the data is manually modified. Personally, it should not be like this.

The last problem I found: On the same layer of DOM node, vue found that the key is not unique. It will report an error. But if you are not using the v-for loop in the same layer of DOM, you will not report an error. So, if it is not in the same layer of DOM The for loop on the above can ensure the uniqueness of the key. (The role of the key has not been touched yet.)

And the solution:

What I think of is to add an extra layer of html tags, but this will create more non-semantic tags, just to ensure the uniqueness of the key and add tags, but I prefer to do this instead of manually splicing strings.

Or manual splicing recommended on the Internet. But: the key is manually modified. If you forget: the key data is different from the original data. It is not so convenient to maintain in the later stage.

Sample Code

    < script  type = "text/javascript"  src = "./vue_localtion/vue.js" > </ script >
</ head >

< body >
    < div  id = "app" >
        < p  v-for = '(item,index) in cyclicData'  :key = 'index' > {{item}} </ p >
        < hr >
        < div > <!--If you remove this layer of div, an error will be reported. Because on the same layer of DOM node: the value of the key is repeated -->
            < p  v-for = '(item,index) in sortCyclicData'  :key = 'index' > {{item}} </ p >
        </ div >
    </ div >

    < script >
        let app = new Vue({
            el : '#app' ,
            data : {
                cyclicData : [ 1 , 8 , 3 , 7 , 5 , 6 ],
            },
            computed : {
                sortCyclicData : function () {
                    return  this .cyclicData.sort( function ( num1, num2 ) {
                        return num1-num2;
                    })
                }
            },
        })
    </ script >

 

[Solved] cnpm: Cannot load the file C:\Users\Raytine\AppData\Roaming\npm\cnpm.ps1 because running scripts is prohibited on this system

Leave a reply

Solution:

1. Enter Windos PowerShell in the search box in the system

2. Click “Run as Administrator”

3. Enter “set-ExecutionPolicy RemoteSigned” and press Enter

4. According to the prompt, enter A and press Enter

5. Return to cnpm -v again to execute successfully.

Not only cnpm commands, including pnpm, yarn and other commands, if such an error is reported when executed, it can be solved by this method. The premise is that if you use the npm command to install these CLI command tools, they must be installed in the global environment to take effect.