Vue in nextTick () parse

More recently, in the development encountered a problem, let me use for vue in nextTick () deepened the understanding ~

The following components are referenced in a drag component:

<vue-draggable-resizable
     class="drag-img"
     :w="coordinate[0].width"
     :h="coordinate[0].height"
     :x="coordinate[0].abs"
     :y="coordinate[0].ord"
     @dragging="onDragAvator"
     @resizing="onResizeAvator"
     @dragstop="onDragstopAvator"
     @onDragStart="onDragStartAvator"
     :min-width="50"
     :min-height="50"
     :handles="['tl','tr','br','bl']"
     :lock-aspect-ratio="true"
     :parent="true">
     <img @click="setAvatorDafault" src="@/assets/img/[email protected]" alt="">          
</vue-draggable-resizable>

The drag assembly of horizontal and vertical coordinates, width and height is controlled by one of the data Data:

data() {
   return {
      coordinate:[{
        width: 50,
        height: 50,
        abs: 10,
        ord: 10
      }]  
    }      
}

In the process of dragging and resizing, and this data should dom operations are two-way binding:

onResizeAvator: function (x, y, width, height) {
    this.coordinate[0].abs = x
    this.coordinate[0].ord = y
},
onDragAvator: function (x, y) {
    this.coordinate[0].abs = x
    this.coordinate[0].ord = y
},

However, when editing echo, we need to get data asynchronously assigned to coordinate, and then display the page.

Now the question is, when the data is assigned to coordinate asynchronous data acquisition, width and height of the page and drag the component has not changed, which is why?

methods: {
　　getDefaultData() {
      let that = this
      axios.get(this.$store.state.marketinghost
      + '/fission/task/get/bycode?onlischoolCode=' + this.onlischoolCode
      + '&taskCode=' + this.$route.query.id)
      .then(res => {
        if(res.data.code == "1") {
          var data = res.data.data
          if (data.components.length) {
            that.coordinate = data.components
          }
        }
      })
      .catch((err) => {
        Promise.resolve(err);
      })
　　}
}
mounted() {
　　this.getDefaultData()
}

 After adding a variable drag control component, the component will be forcibly updated DOM, wide echo another job becomes the value of the time

<vue-draggable-resizable
     class="drag-img"
     v-if="!editLoading"
     :w="coordinate[0].width"
     :h="coordinate[0].height"
     :x="coordinate[0].abs" :y="coordinate[0].ord" @dragging="onDragAvator" @resizing="onResizeAvator" @dragstop="onDragstopAvator" @onDragStart="onDragStartAvator" :min-width="50" :min-height="50" :handles="['tl','tr','br','bl']" :lock-aspect-ratio="true" :parent="true"> <img @click="setAvatorDafault" src="@/assets/img/[email protected]" alt=""> </vue-draggable-resizable>

data() {
   return {
　　　 editLoading: false,
      coordinate:[{
        width: 50,
        height: 50,
        abs: 10,
        ord: 10 }] } }

methods: {
　　getDefaultData() {
      let that = this
      that.editLoading = true
      axios.get(this.$store.state.marketinghost
      + '/fission/task/get/bycode?onlischoolCode=' + this.onlischoolCode
      + '&taskCode=' + this.$route.query.id)
      .then(res => {
        if(res.data.code == "1") {
          var data = res.data.data
          if (data.components.length) {
            that.coordinate = data.components
            that.$nextTick(() => {
              that.editLoading = false
            })
          }
        }
      })
      .catch((err) => {
        Promise.resolve(err);
      })
　　}
}

mounted() {
　　this.getDefaultData()
}

 In order to better understand nextTick (), the following is the official gateway to the asynchronous update vue explained queue:

https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97

In short, when you set up  vm.someData = 'new value', that component will not be re-rendered immediately. When the refresh queue, the component will be an event loop "tick" in the next update, in order to wait Vue change after the data update is complete DOM, you can use the data immediately after the change  Vue.nextTick(callback) :

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

 Because nextTick () returns a Promise subject matter, it can also be written async await the way /:

Methods: { 
  UpdateMessage: the async function () {
     the this .message = 'updated' 
    the console.log ( the this . $ el.textContent) // => 'non-updated' 
    the await the this $ nextTick (). 
    the console.log ( the this . el.textContent $) // => 'updated' 
  } 
}