动态计算属性名

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

您可以动态添加计算的属性，如本文所示，

动态生成计算属性。

由于属性名称源是嵌套的，而且(可能)是异步的，因此需要一个深度监视程序来处理更改。

该属性的使用是有限的，您不能在在创建时编译的证监会模板上使用它。在方法中使用它时，可能需要根据调用序列来检查它是否存在。

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组件属性(道具、数据等)。

Answer 3

我也有同样的问题，或者说我做了这个.

<script>
export default {
  data: {
    return: {
      init: 0
    }
  },
computed: {
    makeComputed() { 
init++ // call something in data to fire the computed function  
      Object.assign(this, ...this.$store.state.auth.objectwithmanyprops)
      return this.$store.state.auth.objectwithmanyprops 
    }
}