Abstract:During the development of the project, the component is rendered through the render() function, and custom drag and drop instructions are defined inside the component. The custom drag and drop directive specifies a series of logical actions that can be performed by the user, such as dragging and scaling elements.

This article is shared from Huawei Cloud Community “[VUE thorny problem solving] project implementation JS to VUE value transfer”, the original author: SHQ5785.

preface

During the development of the project, the component is rendered through the render() function, and custom drag and drop instructions are defined inside the component. The custom drag and drop directive specifies a series of logical actions that can be performed by the user, such as dragging and scaling elements.

Another logical processing page is implemented by Vue, which can display information about the attributes of the element (including size, width, height, left, top, etc.) in real time.

Train of thought

  1. Listener mode implementation;
  2. Vuex State implementation;

Code implementation

.js

El. onMouseDown = function (E) {... document.onmouseup = function (e) { document.body.style.cursor = 'pointer'; document.onmousemove = null; document.onmouseup = null; isMove = false; document.body.removeChild(mask); // Relative let domStyle = {width: data.width, height: data.height, left: data.left, top: Data.top} el.style.csstext = setStyle(el, domStyle) // Vuex State implementation store.mit ('domAzimuth/SET_DOMAZIMUTION', el.style.cssText); // window.postMessage({domStyle: domStyle}, '*')}}

.vue

computed: { ... mapGetters('dragModule', ['editLayer']), ... Function props () {return this.props}}, function props () {return this.props}}, function props () {return this.props}}, function props (); Otherwise it will cause a memory leak! beforeDestroy () { // window.removeEventListener('message', this.listenerMessage) }, mounted () { // window.addEventListener('message', this.listenerMessage) }, watch: { domStyle (n) { let configs = [] let model = {} for (let name in this.editSoul.model) { let config = this.editSoul.model[name] model[name] = '' config.name = name if ('style' === name) { config.value = this.directProps } configs.push(config) } this.model = model this.configs = configs }, }

The effect

Expand reading – Resolve a problem with an asynchronous request Promise causing page data rendering errors

Scene description

During the optimization of the Vue project, the page part applied JS to call the asynchronous data returned by the Promise, so the page part never loaded the data values returned by the background. By triggering other DOM operations, such as the folding of fields, the background data can be rendered as normal. The processing logic is roughly as follows:

<template>
    <div v-for="(items, index) in results" :key="items.itemsID">
        <span v-for="(item, index) in items.appendItems" :key="item.itemID">
            <el-button type="text" @click="handlerClick(item)">
                {{item.itemName}}
            </el-button>
        </span>
    </div>
</template>
<script>
    results.foreach((result, index, results) => {
        results[index].appendItems = []
        aysnMethods(inputParams).then(res => {
            results[index].appendItems = res.returnResults
        })
    })
</script>

Problem analysis

After debugging the page data output and debugger breakpoint, it is found that the asynchronous data is not processed before the end of page rendering, resulting in page data rendering problems.

When the Vue instance is generated and assigned to the object again, it is not automatically updated to the view; When we look at the Vue documentation, it says that if a new property is added to an instance after it has been created, it will not trigger a view update.

Due to ES5 restrictions, vue.js cannot detect the addition or removal of object attributes, i.e. Vue does not do dirty data checking. Because Vue.js converts the property to getter/setter when it initializes the instance, the property must be on the Data object for Vue.js to transform it and for it to be responsive.

The measures

Through the analysis of the above problems, V-IF can be used to control the page rendering and destruction logic, destroy the corresponding data segment before the asynchronous method request, and create the corresponding data segment after the asynchronous method request is successful. The code is as follows:

<template>
    <div v-if="showForm">
        <div v-for="(items, index) in results" :key="items.itemsID">
            <span v-for="(item, index) in items.appendItems" :key="item.itemID">
                <el-button type="text" @click="handlerClick(item)">
                    {{item.itemName}}
                </el-button>
            </span>
        </div>
    </div>
</template>
<script>
    data(): {
        return {
            showForm: false
        }
    }
    results.foreach((result, index, results) => {
        results[index].appendItems = []
        vm.showForm = false
        aysnMethods(inputParams).then(res => {
            results[index].appendItems = res.returnResults
            vm.showForm = false
        })
    })
</script>

Click on the attention, the first time to understand Huawei cloud fresh technology ~