如何动态添加方法到Vue组件

Question

当我从服务器获取数据时，例如

[{methodName:mothodValue},{methodName:mothodValue}]

然后我想要动态生成方法，比如

methods: {
  functionArray.forEach(function (item) {
    item.functionName:function () {
      item.functionValue;
    }
  })
}

这是我的代码

var componentName = Vue.component(componentName, {
  data: function () {
    return {
      value: value
    }
  },
  template: componentTemplate,
  methods:{
    functionArray.forEach(function (item) {
      item.functionName:function () {
        item.functionValue;
      }
    })
  }
})

旧代码是

methods:{
  getValue : function(){
    getValue(this.value);
  }
}

这可能吗？

Answer 1

如果在创建 Vue 组件之前返回来自服务器的数据（我不确定是否可以在创建 Vue 组件之后添加方法），那么您可以像这样创建一个方法对象：

var methods = {};
functionArray.forEach(function (item) {
  methods[item.functionName] = item.functionValue;
});

您无法使用代码填充对象文字，但您可以随后使用如下代码填充空对象文字。

---

然后你可以将它放入你的组件中，如下所示：

var componentName = Vue.component(componentName, {
  // ..
  methods: methods
});