Vue.js 2：在事件处理程序的函数调用中转换字符串

Question

In Vue.js 2 我想将一个字符串转换成一个函数调用，以便它可以被设置为一个事件处理程序。我相信这会非常实用，特别是在基于对象列表动态创建大量元素（例如按钮）时。

new Vue({
  el: "#app",
  data: {
    myArray: [
      { value: 1, fn: "firstMethod" },
      { value: 2, fn: "secondMethod" },
    ],
  },
  methods: {
    firstMethod() {
      console.log("'firstMethod' was executed.");
    },
    secondMethod() {
      console.log("'secondMethod' was executed.");
    },
  },
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <template v-for="elem in myArray">
        <button @click="elem.fn">  <!-- Here is where I am stucked. -->
          <!-- <button> -->
          {{elem.value}}
        </button>
      </template>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="script.js"></script>
  </body>
</html>

我第一次尝试这样做是将 myArray 中的 fn 属性设置为指向具有 this 的相应函数的指针（例如 fn: this.firstMethod）。问题是，我相信，在定义时，这些功能仍然未知，因为我得到：[Vue warn]: Invalid handler for event "click": got undefined.

我想要达到的目标是否可行？我忽略了这种策略的缺点吗？

Answer 1

尝试创建一种适用于所有按钮的方法

new Vue({
  el: "#app",
  data: {
    myArray: [
      { value: 1, fn: "firstMethod" },
      { value: 2, fn: "secondMethod" },
    ],
  },
  methods: {
    basicMethod(name) {
      console.log(`'${name}' was executed.`);
      if(name === 'firstMethod') {
        //some logic, and so on for other methods if u need
      }
    },
  },
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <template v-for="elem in myArray">
        <button @click="basicMethod(elem.fn)">  <!-- Here is where I am stucked. -->
          <!-- <button> -->
          {{elem.value}}
        </button>
      </template>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Answer 2

您可以使用提供函数名的通用方法调用 this[ fn ]();。

但出于安全原因，您可能希望这些自定义方法在一个对象中，而不仅仅是在主对象中this，这样就无法调用其他方法。

此外，您想在调用方法之前检查该方法是否存在。

看起来像这样：

new Vue({
  el: "#app",
  data: {
    myArray: [
      { value: 1, fn: "firstMethod" },
      { value: 2, fn: "secondMethod" },
      { value: 3, fn: "nonExistingMethod" }, // Won't throw an error
      { value: 4, fn: "someImportantSecureMethod" }, // Won't be called
    ],
    customMethods: {
      firstMethod: function() {
        console.log("'firstMethod' was executed.");
      },
      secondMethod: function() {
        console.log("'secondMethod' was executed.");
      },
    },
  },
  methods: {
    callCustomMethod(fn) {
      // Make sure it exists
      if (typeof this.customMethods[fn] === "function") {
        // Only methods inside the customMethods object are available
        this.customMethods[fn]();
      }
    },
    someImportantSecureMethod() {
      console.log('The method may not be exposed to dynamic calling!');
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <template v-for="elem in myArray">
        <button @click="callCustomMethod(elem.fn)">
            <!-- <button> -->
            {{elem.value}}
        </button>
    </template>
</div>

作为旁注： 您也可以考虑为此使用自定义事件 (see docs)。使用 $emit('custom-event-name') 作为 v-on:click 处理程序，并将您的自定义方法作为事件侦听器。（当您以后可能想要将这些项目分成单独的组件时，这很容易。）

Vue.js 2：在事件处理程序的函数调用中转换字符串

Vue.js 2: converting a string in a function call at an event handler

html

javascript

vue.js

vuejs2