Vue中根据方法名称动态调用方法

很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效.

// 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意
<script>
export default {
  name: "DynamicFunc",
  data() {
    return {
      key: '',
      value: '',
    }
  },
  mounted() {
    // 测试一下
    this.callModelFun('funcA');
    this.callModelFun('funcB');
  },
  methods: {
    test(func) {

    },
    /**
     * 根据方法名称调用方法
     */
    callModelFun(funcName) {
      let methods = this.$options.methods;
      // 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意
      const _this = this;
      methods[funcName](_this);
    },

    /**
     * funcA
     * @param _this
     */
    funcA(_this) {
      console.log("调用A方法")
      _this.key = "A";
      _this.value = "A";
      console.log(_this.key, _this.value)
    },

    /**
     * funcB
     * @param _this
     */
    funcB(_this) {
      console.log("调用B方法")
      _this.key = "B";
      _this.value = "B";
      console.log(_this.key, _this.value)
    }
  }
}
</script>