Front end operation case – how to transfer values from JS to Vue

Time:2021-8-13

Summary:In the process of project development, the component is rendered by render() function, and user-defined drag and drop instructions are defined inside the component. The user-defined drag and drop instruction specifies a series of logical processing actions such as element drag and zoom according to the user.

This article is shared from Huawei cloud community《[Vue thorny problem solving] the project realizes JS value transfer to Vue》, original author: shq5785.

preface

In the process of project development, the component is rendered by render() function, and user-defined drag and drop instructions are defined inside the component. The user-defined drag and drop instruction specifies a series of logical processing actions such as element drag and zoom according to the user.

Another logical processing page is implemented by Vue, which can display the relevant attribute information of elements in real time (including size, width, height, left, top and other attributes).

thinking

  1. Listener mode;
  2. Vuex state implementation;

code implementation

.js

//Mouse down event
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);
      //Element style relative orientation attribute
      let domStyle = {
        width: data.width,
        height: data.height,
        left: data.left,
        top: data.top
      }
      el.style.cssText = setStyle(el, domStyle)
      //Vuex state implementation
      store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText);
      //Listener implementation
      // window.postMessage({domStyle: domStyle}, '*')
}

}

.vue

computed: {
      ...mapGetters('dragModule', ['editLayer']),
      ...mapGetters('domAzimuth', ['directProps']),
      domStyle () {
        return this.directProps
      }
    },
    //In listener mode, be sure to release the listener before destroying the page, otherwise it will cause memory leakage!
    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
      },
}

effect

Front end operation case - how to transfer values from JS to Vue

Extended reading – solutions to the problem of page data rendering error caused by asynchronous request promise

Scene description

During Vue project optimization, the asynchronous data returned by JS call promise is applied to the page part, resulting in the page part always unable to load the data value returned by the background. By triggering other DOM operations (such as folding fields), the background data can be rendered and displayed normally. 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 page data output and debugger breakpoint debugging, 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 the object is assigned again, it will not be automatically updated to the view; When we look at the Vue document, we will find that if a new attribute is added to the instance after the instance is created, it will not trigger the view update.

Limited by Es5, vue.js cannot detect the addition or deletion of object attributes, that is, Vue does not check dirty data. Because vue.js converts the attribute to getter / setter when initializing the instance, the attribute must be on the data object to allow vue.js to convert it and make it responsive.

Solutions

Through the above problem analysis, you can control the page rendering and destruction logic through V-IF, 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 focus to learn about Huawei cloud’s new technologies for the first time~