Динамическое вычисляемое имя свойства

Question

computed: {

    ...mapGetters(['getElements']),

    element() {
        return this.getElements(this.formId, this.sectionId, this.elementId);
    },

    [this.element.inputName]: { 
    },

}

выдает ошибку: Uncaught TypeError: Cannot read property 'element' of undefined

Как динамически установить имя пропеллера?

Answer 1

Вы можете добавлять вычисляемые свойства динамически, согласно этому сообщению,

Создание вычисляемых свойств на лету .

Поскольку источник имени свойства является вложенным и (вероятно,) async, вам потребуется глубокий наблюдатель для обработки изменений.

Использование свойства ограничено, его нельзя использовать в шаблоне SFC, который компилируется во время создания.При использовании его в методе вам может потребоваться проверить его существование в зависимости от последовательности вызовов.

computed: {
  element() {
    return this.getElements(...);
  },
},
watch: {
  element: {
    handler: function (newValue) {
      if (newValue.inputName) {
        this.addProp(['element', 'inputName'], () => { return 'someValue' })
      }
    },
    deep: true
  }
},
methods: {
  addProp (path, getter) {
    // Get property reference or undefined if not (yet) valid
    const propName = path.reduce((acc, prop) => acc ? acc[prop] : undefined, this)
    if (!propName) { return }

    const computedProp = {
      get() {
        return getter()
      }
    }
    this[propName] = computedProp
  },
}

Answer 2

При создании объекта опций компонента Vue это не экземпляр Vue компонента (его до создания), поэтому у вас нет возможности использовать такие вещи, как вычисленные свойства или другие свойства компонента Vue (реквизиты, данные).и т.д ...)