Vue.js nextTick里面的计算属性

Question

我有“上下文菜单”组件。计算属性top和left使用$event属性定义菜单位置。但是，当我试图打开上下文菜单，菜单元素尚未呈现，没有菜单的offsetHeight无法计算top，所以我想通了，使用一些“nextTick黑客”计算属性里面：

top() { 
    if (!this.menuIsRendered) { // by default, menuIsRendered is false 
    this.$nextTick(() => { 
     this.menuIsRendered = true 
    }) 

    return 0 
    } 

    ... // menu element is rendered, calculate top value 
}, 

这是好吗？我认为必须有更好的方式来做到这一点。

另外，充满组件的代码：

<template> 
    <div ref="menu" :style="{top: `${top}px`, left: `${left}px`}" 
    v-click-outside="close" @contextmenu.prevent v-if="show"> 
    <slot></slot> 
    </div> 
</template> 

<script> 
export default { 
    props: [ 
    'show', 
    'event' 
    ], 
    data() { 
    return { 
     menuIsRendered: null, 
    } 
    }, 
    computed: { 
    top() { 
     if (!this.menuIsRendered) { 
     this.$nextTick(() => { 
      this.menuIsRendered = true 
     }) 

     return 0 
     } 

     let top = this.event.y 
     let largestHeight = window.innerHeight - this.$refs.menu.offsetHeight - 25 

     return top > largestHeight ? largestHeight : top + 1 
    }, 
    left() { 
     if (!this.menuIsRendered) { 
     return 0 
     } 

     let left = this.event.x 
     let largestWidth = window.innerWidth - this.$refs.menu.offsetWidth - 25 

     return left > largestWidth ? largestWidth : left + 1 
    }, 
    }, 
    methods: { 
    close() { 
     this.$emit('close') 
    }, 
    } 
} 
</script> 

部件使用情况：

<context-menu @close="close" :event="event" :show="show"> 
    <div @click="doAction">Action</div> 
    <div @click="doAnotherAction">Another action</div> 
</context-menu> 

Answer 1

通常，计算的属性必须是同步的。如果你想使这个属性异步，你应该使用这个插件：https://github.com/foxbenjaminfox/vue-async-computed

有了这个插件，你可以在Vue中计算异步计算的属性。没有使用这个插件，你不能这样做。

现在，您可以设置asynchrone computeds与asyncComputed属性：

asyncComputed: { 
    username() { 
    return Vue.http.get('/get-username-by-id/' + this.userId) 
     .then(response => response.data.username) 
    } 
}