Tag Archives: Vue3

Vue3 vue.draggable slot jsx Error: Error: draggable element must have an item slot

The problems encountered when using vuedraggable to drag components in vue3 are recorded as follows:

1. There is no problem using the drag and drop plug-in in the template according to the official website, as follows:

Item is a named slot

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div> {{element.name}} </div>
  </template>
</draggable>

2. When using drag plug-in in JSX, an error is reported: draggable element must have an item slot

Note that the item slot is written as follows:

    const slots = {
      item: ({element, index}) => {
          return <div> {{element.name}} </div>
      }
    }
    render(h) {
      return <draggable v-model="myArray" item-key="id" v-slots={ slots }></draggable>
    }

 

[Solved] Vue3 vite Error: Uncaught ReferenceError: require is not defined

when using vue3 + vite to build the background framework template, errors will be reported in vite according to some previous writing methods.

Require. In vue3 vite Context error

in vue2, use require Context to get all the files of a file, but an error is reported after using vite in vue3.

you need to use import meta.globEager("./modules/*.js")

process. env. XXXX related variable error

in vue2, use process env.XXXX to get environment variables

use iimport meta.env.XXXX solution

problems in subsequent construction shall be updated gradually

[Solved] Vue3 wow.js Error: Cannot set property ‘getPropertyValue’ of undefined

The original wowjs can be used normally in vue2 project, but an error will be reported in vue3 project.

Error message:

Cannot set property 'getPropertyValue' of undefined

You need to use wow.js instead in the vue3 project

  1. Install wow.js (note that wow.js is not wowjs)
npm install wow.js --save
# or
yarn add wow.js
      2. install animate.css
npm install animate.css --save
# or
yarn add animate.css
  1. Configure animate.css in main.ts/main.js
import animated from "animate.css";

app.use(animated);

4. Use wow.js in components

import WOW from "wow.js";

mounted() {
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
  },

5. Configure parameters on the HTML element to be animated. For more animation effects, please refer to animate.css

  <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

When vue3 introduces element plus, index.css cannot be found. Solve the problem

problem

In the project built by the latest Vue 3.2 + Vue cli 4.5, the method of introducing element plus in the old version of vue3 was initially followed, and all style files of element plus were introduced in main.js with the following statement:

import 'element-plus/lib/theme-chalk/index.css';

However, an error is reported:

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'element-plus/lib/theme-chalk/index.css' in 'E:\sourceFiles\map-survey\src'

Since it was introduced in this way before, I felt it was outrageous when reporting an error

solve

The solution is also very simple. Now that you have installed the element plus dependency, you can’t find the file. The probability is that the path has changed. So I manually turned to node modules and found that the whole theme chat folder was moved.

Therefore, the statement introducing the style is changed to:

import 'element-plus/theme-chalk/index.css'

Error reporting can be solved. I hope I can help friends who have just contacted Vue + element

Vue3’s use of reactive/torefs + V-model leads to the failure of response and the failure of El form input

1. Problem background

When using the El form in vue3, the following code will cause the input box to be unable to input, the value cannot be assigned, and the selection box cannot be selected

<el-form ref="service" :model="service" label-width="80px">
    <el-form-item label="NAME">
      <el-input v-model="service.name"></el-input>
    </el-form-item>
    ......
</el-form>

setup() {
　　const state = reactive({
　　　　service: {
　　　　　　name: '**'
　　　　}
　　})
　　return {
　　　　...toRefs(state)
　　}
}

The repetition of the name of the response variable declared by ref component instance and ref() will lead to the invalidation of the response. Any form content of the form cannot be entered, and an error will be reported: uncaught (in promise) typeerror: cannot read property ‘name’ of undefined, etc

2. Problem causes and Solutions

This problem arises because the ref naming is the same as the model. The reason is that El form declares ref = “service”, which causes the service declared in state to be overwritten, and the two conflict.

Modify the name (such as ref = “serviceform” or model = “serviceinfo”) to solve the problem.

Vue3 keeps reporting error: parsing error: unexpected token solution

After looking for a long time, I found that the online solutions didn’t work very well. I tried for two days and finally solved the bug. This solution is only for vue3. After all, vue2, I didn’t encounter this bug. I don’t know whether it works or not

prerequisite

Confirm that the eslint plugin Vue dependency is installed

Reference address

Vue3 + JS solution

Add the following configuration in the. Eslint.js configuration file

Vue3 + TS solution

OK, these are the vue3 error reporting solutions I sorted out. If you like, praise the collection!