Tag Archives: vue.js

uniapp e. currentTarget.dataset Pay attention

There is a problem with uniapp. When you compile to H5, you can get the data, but you can’t get the data in the WeChat applet
As shown in figure:

Then, at the prompt, add console.log to the relevant code to see the output
It turns out that there was an error adding a label to the element

Look at both sides of the console to find the reason:
H5:

WeChat applet:

The WeChat applet converts uppercase letters to lowercase
Fix: Change the data-trailerID in HBuilderX to all lowercase

Error in Babel configuration of webpack

In the configuration of Babel times wrong below

as we can see from the error prompt time configuration Babel when make a mistake, then we need to look to the specific configuration of Babel, this is my configuration

from the configuration, see can see problems in persets words are spelt wrong, this kind of error is quite common, the correct method is presets

Vue running error: error failed to compile with 1 errors, browser error: cannot get/

Error Failed to compile with 1 errors: Cannot GET /
Share the solution to the problem I encountered for your reference!
Today, while running the Vue project, the following error occurred on the command line:

 
Browser access returned the following error: no root route was found

 
Js, and the actual name of the project has changed. In the configuration file, the name is main.html, and in the root directory of the project, it is index.html

Therefore, change main.html to index.html in the configuration file and the project will start successfully.
 

V-for styles individual elements

v-forts styles for individual elements
v-formponent can loop through a bunch of components. However, when styling, there is a need for individual elements to be styled in such a way that they are highlighted.

<card-grid
        style="width:25%; text-align: center"
        v-for="(item,i) in menuItems"
        :key="i"
        ref="items"
        :style="i === itemIndex ?chosenStyle:'' "
      >
        {{ item.name }}
      </card-grid>

itemIndex as needs to be individually styled sequence, when the I render time and itemIndex is equal, this component will be separately set a : style = 'chosenStyle' , can achieve the corresponding effect.

Ueditor paste word image and upload image file automatically

Tinymce is a very good rich text editor, you can go to the website to download. https://www.tiny.cloud
Here is the source code of PowerPaste, a paid plug-in on its official website, but it does not affect the use of functionality.

umeditor+粘贴word图片


Take Vue as an example:
Install Tinymce under static directory instead of NPM.
PowerPaste is put in the \static\tinymce\plugins directory


Introducing tinymce.min.js in index.html.


Code parameter configuration is shown in the figure below:


Replace paste in plugins with powerpaste and you’re done.
The final effect, can automatically batch upload all the images in Word

After the picture is uploaded, the image address in the editor is changed to the image address of the server.

Error reported by wechat applet: cannot read property ‘forceupdate’ of undefined

Cannot read property ‘forceUpdate’ of undefined
Cannot read property ‘forceUpdate’ of undefined**
below error is to use HBuilder X run WeChat small program sometimes error, although this error does not affect the development function, but look very boring, especially for me this kind of a bit obsessivepeople

this error has two solutions
1. Use test number when creating projects with WeChat development tool to avoid this error. Note: If you need to develop authorization login and payment functions in your development project, you need the AppID to test these functions, and the test number does not support these functions. In this case, the second method can be used
2. Go to WeChat small program to register an account, registration will be OK in a few minutes, after the success of the AppID. How do I get it?

Then use the AppID
in HBuilder X
Above is my share and solution for this error report. If there is anything wrong, please correct it

On and off of timer in JS

setInterval()
When a function
is called for a specified period of time:

setInterval(function,time,lang)

function: function to be called or code string to be executed
time: required parameters, every how long to call the function, in milliseconds
lang: optional parameters, running JScript | VBScript | JavaScript
clearInterval()
Means to stop the setInterval timer call function

function getTime() {
        console.log(123);
        if (true) {
            clearInterval(db)
        }
    }

let db = setInterval(getTime, 1000)

setTimeout()
Call a function after a certain time
syntax:

setTimeout(function,time,lang)

Function:
function: required, to be called
time: required, number of milliseconds to wait before executing code
lang: optional, script language: JScript | VBScript | JavaScript

npm ERR! Error: EPERM: operation not permitted, open ‘C:\Program Files\nodejs\node_ Solution to cache / xxx

Problem: When installing NPM I VUe-CLI-g, an error is reported as the problem message
General solutions (for Windows 10) :
Method 1: Click the search button at the bottom left of the screen, search for the keyword ‘command prompt’, right-click, and run as an administrator.
Method two: right click window badge or Window + X in the lower left of the screen, run as an administrator (Windows PowerShell (administrator)), you can.
This method is suitable for permission problems.

Gulp error report, assertionerror [err_ ASSERTION]: Task function must be specified

Async must be added before the callback function of task task to form an asynchronous function. For example:

gulp.task('cssmin', async() => {
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('./dist/css'));
});

There are also hints in the error message:
The following tasks did not complete: default, < anonymous>
Did you forget to signal async completion?
 
Build the global task call to report an error, such as:
PS C:\Users\J\Desktop\demo\gulp-demo> Gulp assert. Js: 385
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at gulp. set [as _setTask] (C: Users\J\node_modules\ lib\set-task.js:10:3)
at gulp. Task (C: \ Users \ \ J node_modules \ undertaker \ lib \ task js: 8)
the at Object. & lt; anonymous> (C: \ Users \ \ Desktop \ demo \ J gulp – demo \ gulpfile js: 60:6)
at the Module. The _compile (internal/modules/CJS/loader. Js: 1176:30)
at the Object. The Module. _extensions.. Js (internal/modules/CJS/loader. Js: 1196:10)
at the Module. The load (internal/modules/CJS/loader. Js: 1040:32)
at the Function, the Module. _load (internal/modules/CJS/loader. Js: 929:14)
the at The Module. The require (internal/modules/CJS/loader. Js: 1080:19)
at the require (internal/modules/CJS/helpers. Js: 72:18)
at the execute (C:\Users\J\AppData\ NPM \node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18) {
generatedMessage: false,
code: ‘ERR_ASSERTION’,
actual: false,
expected: True,
operator: ‘= =’
}
 
Simply prefix the function name of the call with Gulp.Series

gulp.task('default', gulp.series(['htmlmin', 'cssmin', 'jsmin', 'copy', async(done) => done]))

 

Vue element El input search to achieve anti shake @ input event requests frequently

Do not use the @input event of EL-input, use this event, use buffering does not work. The actual code is as follows:

<template>
 <el-input suffix-icon="el-icon-search" v-model="page.searchCode" clearable></el-input>
</template>
<script>
	data() {
	    return {
	      timer: '',
	      page:{
	      	searchCode:''
	      }
	    }
	  },
	  watch: {
	    'page.searchCode': {
	      deep: true,
	      handler(newVal, oldVal) {
	        // if (newVal.trim().length !== 0) {
	         //this.getList is a method called after a delay of 500ms.
	        this.debounce(this.getList, 500) 
	        // }
	      }
	    }
	  },
	  methods: {
	    debounce(fn, wait) {
	      if (this.timer !== null) {
	        clearTimeout(this.timer)
	      }
	      this.timer = setTimeout(fn, wait)
	    }
	  },
	  getList(){}//The request can be written in here.
	}
</script>

Nuxt cannot find the static resource in static

Nuxt cannot find the static resource inside static reason
The old VUE project was migrated because the project needed it. Then follow the tutorial to create the SRC folder in Nuxt, and that’s why. Because the initial directory for srcDir is set. So I can’t find the folder outside of SRC.
Solution: Don’t put old project folders in SRC. Follow the folder location where the project was created to