Tag Archives: Element

Vue3 Error: [vue/no-multiple-template-root] The template root requires exactly one element

vue3.0 supports <template/></template> tag to delegate more than one root element
Building the project with the latest Vite, the code in the default app.vue is as follows:

The code can run normally, but the vscode gives an error prompt:

[vue/no-multiple-template-root]
The template root requires exactly one element. eslint-plugin-vue

The reason is that the vetur plug-in has not been updated

The temporary solution is

Settings -> Search: eslint plugin Vue -> Uncheck the first (Vetur › Validation: Template )

[Solved] Element form method Error: TypeError: Cannot read properties of undefined (reading ‘resetFields’)

use:

      /**
       * rebuild sheet
       */
      resetForm(formName){
          this.$refs[formName].resetFields();
      },

report errors:

TypeError: Cannot read properties of undefined (reading 'resetFields')
    at VueComponent.resetForm (index.vue?6ced:501)
    at VueComponent.addColumn (index.vue?6ced:487)
    at click (index.vue?5d22:653)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.handleClick (element-ui.common.js?5c96:9441)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)

Solution:

      /**
       * rebuild sheet
       */
      resetForm(formName) {
        //The purpose of adding if judgment condition is to solve the problem that the console prompt object does not exist
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }
      },

[Solved] Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

When you clone a Vue project from the open source platform, it is reported that the corresponding module cannot be found after logging in.

After searching a lot, it was finally solved.

export const loadView = (view) => {
  return () => import(`@/views/${view}`)
}

Change to the following

export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}`], resolve)
}

It can be solved.

Cause: there is a problem with the webpack version. Dynamic import in webpack 4 does not support variable mode

The project can be seen in the elephant template.

[Solved] Vue Element Date plug-in reports an error in form validation

Error Messages:

Error in event handler for “el.form.change”: “TypeError: value.getTime is not a function”

Element UI’s date picker el-date-picker in addition to format value-format=”yyyy-MM-dd” and format=”yyyy-MM-dd”
In form validation.

{ type: 'date', required: true, message: 'Please select a date', trigger: 'change' } 

There will be conflicts

Solution: modify the verification rules

type: ‘date’-> type: ‘string’

Possible causes of errors:

After the format conversion of the element UI, the binding value will be converted to a string, and the type: ‘date’ in the verification rule does not match. As for its error, it is converted to a string, not a date object, so there is no gettime method.

[Solved] Vue element UI form verification error: cannot read property ‘validate’ of undefined

[error report solution] Vue element UI form validation error cannot read property ‘validate’ of undefined

Error reporting restore project background error reporting reason error reporting solution

Error reporting restore

[Vue warn]: 
Error in v-on handler: 
"TypeError: Cannot read properties of undefined (reading 'validate')"

Project background

Vue + element UI uses the official form with verification function of element UI

Error reporting reason

The default name of the form has been modified, but the name of ref = “ruleform” in the ‘El form’ label has not been changed. The registration name is inconsistent, which triggers the error.

Error reporting solution

If you want to customize the form name. Be sure to modify the form name in [ref = “ruleform”].

The date selector Report Null Error in element is cleared

Recently, a small bug was found when using the date selector in element. When I clear the selected date and click search again, the console will report an error, as shown in the following figure:

After troubleshooting, I found that this problem occurs because when we click clear, the value value bound by V-model will change from a value to a null, so the console will report an error. There are also many solutions, such as re assigning value before the next call; Or you can also listen to the value of the V-model, and then solve the problem through judgment. The method I use is to directly judge the value of the V-model, and then assign the value if it meets the conditions. The specific implementation code is as follows:

core code:

//Event Methods
searchTabs() {
// parameters needed on the backend
let data = {
    sjlx: this.sjlx,
    pageNumber: this.pageSize,
    pageSize: this.pageNumber,
    zfry: this.road.enforce,
    jcjg: this.road.testing,
    sfcf: this.road.other,
    startTime: "",//start time
    endTime: "",//end time
}
// By determining the value of the v-model binding, it must be an Array value and must have two values
if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
    // Assign the judged value to the startTime and endTime in data above
    data.startTime = new Date(this.road.dateTime[0]) // start time
    data.endTime = new Date(this.road.dateTime[1]) // end time
}
}

Full code:

html

 <div>
     <el-date-picker
             v-model="road.dateTime"
             type="datetimerange"
             start-placeholder="start-date"
             end-placeholder="end-date"
             :default-time="['12:00:00']"
             value-format="yyyy-MM-dd"
     >
     </el-date-picker>
 </div>

js

export default {
    data() {
        return {
        		pageNumber: 1, //Current page number
                pageSize: 10, //how many items are displayed on a page
          		//search criteria
                road: {
                    dateTime: "", //date
                    enforce: "", //Road enforcement officer
                    testing: "", //testing results
                    whether: "", //whether to penalize
                },
        }
    },
    methods:{
         	//Search
            searchTabs() {
                // parameters needed on the back end
                let data = {
                    sjlx: this.sjlx,
                    pageNumber: this.pageSize,
                    pageSize: this.pageNumber,
                    zfry: this.road.enforce,
                    jcjg: this.road.testing,
                    sfcf: this.road.other,
                    startTime: "",//start time
                    endTime: "",//end time
                }
                // By determining the value of the v-model binding, it must be an Array value and must have two values
                if (this.road.dateTime && Array.isArray(this.road.dateTime) && this.road.dateTime.length == 2) {
                    // Assign the judged value to the startTime and endTime in data above
                    data.startTime = new Date(this.road.dateTime[0]) // start time
                    data.endTime = new Date(this.road.dateTime[1]) // end time
                }
                // call the interface pass data to the backend
                search(data).then(res => {
                    // console.log(res, "search)....")
                    this.tableData = res.data.records
                    this.pageTotal = res.data.total
                })
            },
    }
}

So far, the problem has been solved.

[Solved] Uncaught (in promise) Error: Avoided redundant navigation to current location:

Add the following code to the routing file   router/index.js

//Solve the problem that vue-router in the navigation bar of ElementUI reports an error when repeatedly clicking the menu in version 3.0 or above
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Good position!!!!!

Type

Echarts Map Error: Error: Invalid geoJson format Cannot read property ‘length‘ of undefined

When displaying the districts and counties of Taizhou, Zhejiang Province, I found an error on the page. I found that the difference in the file is that there is a “type”: “geometrycollection”
Modify node in Yuhuan JSON_Modules\charts\lib\coord\geo\parsegeojason.js code

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */


/**
 * AUTO-GENERATED FILE. DO NOT MODIFY.
 */

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/**
 * Parse and decode geo json
 */
import * as zrUtil from 'zrender/lib/core/util';
import Region from './Region';

function decode(json) {
    if (!json.UTF8Encoding) {
        return json;
    }

    var jsonCompressed = json;
    var encodeScale = jsonCompressed.UTF8Scale;

    if (encodeScale == null) {
        encodeScale = 1024;
    }

    var features = jsonCompressed.features;

    for (var f = 0; f < features.length; f++) {
        var feature = features[f];
        var geometry = feature.geometry;

        if (geometry.type === 'Polygon') {
            var coordinates = geometry.coordinates;

            for (var c = 0; c < coordinates.length; c++) {
                coordinates[c] = decodePolygon(coordinates[c], geometry.encodeOffsets[c], encodeScale);
            }
        } else if (geometry.type === 'MultiPolygon') {
            var coordinates = geometry.coordinates;

            for (var c = 0; c < coordinates.length; c++) {
                var coordinate = coordinates[c];

                for (var c2 = 0; c2 < coordinate.length; c2++) {
                    coordinate[c2] = decodePolygon(coordinate[c2], geometry.encodeOffsets[c][c2], encodeScale);
                }
            }
        }
    } // Has been decoded


    jsonCompressed.UTF8Encoding = false;
    return jsonCompressed;
}

function decodePolygon(coordinate, encodeOffsets, encodeScale) {
    var result = [];
    var prevX = encodeOffsets[0];
    var prevY = encodeOffsets[1];

    for (var i = 0; i < coordinate.length; i += 2) {
        var x = coordinate.charCodeAt(i) - 64;
        var y = coordinate.charCodeAt(i + 1) - 64; // ZigZag decoding

        x = x >> 1 ^ -(x & 1);
        y = y >> 1 ^ -(y & 1); // Delta deocding

        x += prevX;
        y += prevY;
        prevX = x;
        prevY = y; // Dequantize

        result.push([x/encodeScale, y/encodeScale]);
    }

    return result;
}

export default function parseGeoJSON(geoJson, nameProperty) {
    decode(geoJson);
    return zrUtil.map(
        zrUtil.filter(geoJson.features, function (featureObj) {
            if (featureObj.geometry.geometries) {
                let geometry = featureObj.geometry.geometries.map(i => {
                    return i.coordinates;
                });
                let { type, properties} = featureObj;
                return {
                    type,
                    properties,
                    geometry
                };
            }
            // Output of mapshaper may have geometry null
            return (
                featureObj.geometry &&
                featureObj.properties &&
                featureObj.geometry.coordinates &&
                featureObj.geometry.coordinates.length > 0
            );
        }),
        function (featureObj) {
            var properties = featureObj.properties;
            var geo = featureObj.geometry;
            var coordinates = geo.coordinates;
            var geometries = [];

            if (geo.type === "GeometryCollection") {
                let geometry = {
                    type: "Polygon"
                };
                let coordinatesArr = featureObj.geometry.geometries.map(i => {
                    return i.coordinates;
                });
                geometry.coordinates = coordinatesArr;
                console.log(coordinatesArr, "coordinatesArr");
                coordinatesArr.forEach(i => {
                    geometries.push({
                        type: "polygon",
                        // According to the GeoJSON specification.
                        // First must be exterior, and the rest are all interior(holes).
                        exterior: i[0],
                        interiors: i.slice(1)
                    });
                });
            }
            if (geo.type === "Polygon") {
                console.log("coordinatesPolygon", coordinates);
                geometries.push({
                    type: "polygon",
                    // According to the GeoJSON specification.
                    // First must be exterior, and the rest are all interior(holes).
                    exterior: coordinates[0],
                    interiors: coordinates.slice(1)
                });
            }

            if (geo.type === "MultiPolygon") {
                zrUtil.each(coordinates, function (item) {
                    if (item[0]) {
                        geometries.push({
                            type: "polygon",
                            exterior: item[0],
                            interiors: item.slice(1)
                        });
                    }
                });
            }
            console.log(
                properties[nameProperty || "name"],
                geometries,
                properties.cp,
                "asdfasdfasdf"
            );
            var region = new Region(
                properties[nameProperty || "name"],
                geometries,
                properties.cp
            );
            region.properties = properties;
            return region;
        })
}

this.$el.querySelectorAll is not a function [How to Solve]

Problem description
when using El tree, the error this. $el.queryselectorall is not a function is reported, which makes the tree unable to render

Problem resolution
refer to the following code snippet

	<el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="functionTree"
    ></el-tree>

Most of the errors reported are incorrect data bound by El tree. Data errors can be divided into the following two types:

Case 1:

Cause: wrong format of treeData data.
Solution: check the treeData data format, the data bound by :data must be an array.

Case 2:

Cause: The treeData array contains dirty data such as null
Solution: Delete the null and other dirty data in the data

[Solved] Cannot read property ‘setCheckedKeys‘ of undefined“

Elementui reports an error. Cannot read property ‘setcheckedkeys’ of undefined“

Click the tree node and execute the following code. An error will be reported because the DOM element is not loaded

  handleRowClick(row) {
    this.$refs.tree.setCheckedKeys(ids);
  },

Correct writing:

  handleRowClick(row) {
    this.$nextTick(() => {
      this.$refs.tree.setCheckedKeys(ids);
    })
  },