javascript - 将属性分配给 javascript 属性的最佳方法

Question

我正在使用 vueJs 计算来为我的组件创建选项，如下所示:

computed:{
  fileOptions() {
    let fileOptions = [
      {
        event:'event',
        name:'Abcd',
        disabled://based upon some condition,
        display://based upon some condition
      },
      {
        event://based upon some condition,
        name:'Open Presentation',
        disabled://based upon some condition,
        display://based upon some condition
      },
    ]
  }
}

事件、禁用和显示属性基于多种条件。

实现此目的的一种方法是使用三元运算符

disabled:this.state.libraryActive=='presentations'?false:true

但是，对于一种情况很容易，但对于多种情况就变得困难。

有什么建议吗？

Answer 1

最佳实践是使用另一个计算属性:

computed:{
  fileOptions() {
    let fileOptions = [
      {
        event:'event',
        name:'Abcd',
        disabled: this.isAbcdDisabled, // based upon some condition,
        display: this.isAbcdVisible // based upon some condition,
      },
      {
        event: this.getEventName, // based upon some condition,
        name:'Open Presentation',
        disabled: this.getDisabled(this.getEventName), // based upon some condition,
        display: this.getVisible(this.getEventName) //based upon some condition
      },
    ]
  },
  isAbcdDisabled ()
  {
    return this.state.libraryActive === 'presentations' && !this.admin ? false : true
  },
  isAbcdVisible ()
  {
    return true;
  },
  getEventName ()
  {
    return this.canEdit ? 'edit' : 'add';
  }
},
methods:
{
  getDisabled (eventName)
  {
    switch(eventName)
    {
      case 'edit': return false;
      case 'add': return true;
      default: return false;
    }
  },
  getVisible (eventName)
  {
    switch(eventName)
    {
      case 'edit': return true;
      case 'add': return true;
      default: return false;
    }
  },  
}