主页 / coding / 问题 / 79234069
Accepted
volume one
Asked: 2024-11-28 21:25:26 +0800 CST

如何执行作为字符串参数传递的函数？

  • 772

应用程序在屏幕上有一些按钮，点击时应执行不同的功能。它有点像这样：

<template>
<ul>
<li v-for="MenuItem in MenuItems">
  <button type="button" @click.prevent="handleClick({Function: MenuItem.Function.Name, Params: MenuItem.Function.Params })">
              {{ MenuItem.Label }}
  </button>
</li>
</ul>
</template>

<script setup>
const MenuItems = [
{
              Label: `Edit`,
              Function: {
                Name: `editItem`,
                Params: {
                  ItemID: 1
                }
 },
{
              Label: `Delete`,
              Function: {
                Name: `deleteItem`,
                Params: {
                  ItemID: 1
                }
 }
]

function handleClick({Function, Params}) {
   Function.apply(Params) // throws not a function error
   eval(Function+"()")    // throws not a fuction error
}

function editItem(){
console.log(`edit item`);
}

function deleteItem(){
console.log(`about to delete item`);
}
</script>

我想要做的就是运行传递给Function参数的所有内容handleClick()，并将该参数作为需要执行Params的参数包含进去，例如或；FunctioneditItem(1)deleteItem(1)

尝试apply()但eval()似乎不起作用并抛出错误Uncaught TypeError: Function.apply is not a function。我使用 VueJS 作为框架，但这实际上是一个 Javascript 问题。

javascript

3 个回答

  1. Best Answer

    将函数作为对象的方法并调用这些方法：

    操场

    const Functions = {
  editItem,
  deleteItem
};

function handleClick({Function, Params}) {
  Functions[Function](Params);
}
    • 1

  2. 我检查了你的代码。请尝试使用此代码库。

    <template>
  <ul>
    <li v-for="MenuItem in MenuItems" :key="MenuItem.Label">
      <button type="button" @click.prevent="handleClick(MenuItem.Function)">
        {{ MenuItem.Label }}
      </button>
    </li>
  </ul>
</template>

<script setup>
function editItem(params) {
  console.log(`Editing item with ID: ${params.ItemID}`);
}

function deleteItem(params) {
  console.log(`Deleting item with ID: ${params.ItemID}`);
}

const MenuItems = [
  {
    Label: `Edit`,
    Function: {
      Name: editItem, // Pass the actual function reference
      Params: {
        ItemID: 1
      }
    }
  },
  {
    Label: `Delete`,
    Function: {
      Name: deleteItem, // Pass the actual function reference
      Params: {
        ItemID: 1
      }
    }
  }
];

function handleClick(FunctionObject) {
  const { Name, Params } = FunctionObject;
  Name(Params); // Invoke the function with parameters
}
</script>

    谢谢

    • 1

  3. Function数组中的属性不是MenuItems对实际函数的引用。它是一个字符串 ( editItem, deleteItem)，您不能像函数一样调用或应用字符串。

    要修复此问题，您可以传递实际的函数引用，而不是 MenuItems 数组中的字符串。以下是更正后的代码：

    <template>
  <ul>
    <li v-for="MenuItem in MenuItems" :key="MenuItem.Label">
      <button 
        type="button" 
        @click.prevent="handleClick(MenuItem.Function, MenuItem.Function.Params)">
        {{ MenuItem.Label }}
      </button>
    </li>
  </ul>
</template>

<script setup>
function editItem(ItemID) {
  console.log(`edit item with ID: ${ItemID}`);
}

function deleteItem(ItemID) {
  console.log(`about to delete item with ID: ${ItemID}`);
}

// Pass actual function references in the MenuItems array
const MenuItems = [
  {
    Label: 'Edit',
    Function: {
      Name: editItem,
      Params: { ItemID: 1 }
    }
  },
  {
    Label: 'Delete',
    Function: {
      Name: deleteItem,
      Params: { ItemID: 1 }
    }
  }
];

// Use `Function` directly as a function reference
function handleClick(Function, Params) {
  Function(Params.ItemID);
}
</script>
    • 1

相关问题