我正在为我的大学做一个项目，类似于使用Vue.JS创建的游戏菜单。
我创建了一些组件，其中一个是简单的Button组件，它具有一些属性，例如名称，图像（按钮的文本是使用图像创建的），以及显然应在调用时调用的回调函数。用户单击组件的主要“ div”元素。
实际上，使用事件调用或类似的函数绑定事件没有任何问题，问题在于我需要将数据存储在JSON文件中，因此Vue数据在呈现之前会接受变量并这些文件几乎所有内容。因为我需要这样做，所以我想与按钮click事件关联的动作也需要从JSON加载，并且.JSON文件不接受函数对象，因此我决定只向函数添加变量在按下按钮后必须响应该按钮的单击事件的名称。
因此，我需要仅使用名称作为字符串来动态调用该函数，但是等等，让我先完成操作，然后再弄清楚错误的主意，我搜索了方法，然后找到了它，但是它不适用于我。
每个按钮都工作正常，当我单击它们时，我会收到应有的响应（试图发出一些警报和console.log消息。）>
我的按钮组件是：
const buttonProperties = { props: [ 'attributes'], data() { return { id: this.attributes.name, text: this.attributes.text, callback: this.attributes.click } }, methods: { execute: function(event) { this.$root.handleFunctionCall(this.callback, event); } }, template: /* html */ ` <div v-bind:id = "id" class = "button" @click = "execute($event)"> <div class = "buttonBack"></div> <img v-bind:id = "'image-' + id" v-bind:src = "text" class = "buttonText"></img> </div> ` } Vue.component('custom-button', buttonProperties);我的JSON文件中数据的一个示例是：
{ "screens": [ { "name" : "main-screen", "position" : "visible", "background" : "../../Resources/Videos/Video.mp4", "title" : "../../Resources/Images/Elements/Main Title.png", "overlays" : [ { "id" : "overlay-options", "position" : "visible", "title" : null, "buttons" : [ { "name" : "new-game", "text" : "../../Resources/Images/Elements/New Game.png", "click" : "askForName" }, { "name" : "options", "text" : "../../Resources/Images/Elements/Options Title.png", "click" : "displayOptions" }, { "name" : "load", "text" : "../../Resources/Images/Elements/Load.png", "click" : "displaySlots" }, { "name" : "exit", "text" : "../../Resources/Images/Elements/Exit.png", "click" : "displayExit" } ], "textInputs" : [], "rangeInputs" : [], "labels" : [] } ] },现在，“按钮”数组中的每个按钮都代表我的应用程序中的CustomButton对象。
我的Vue配置如下：
configuration = { el: "#application", data: { /* JSON Parsed Variables On created() Event: */ screens: undefined, overlays: undefined, music: undefined, sounds: undefined, difficulties: undefined, /* Application Default Variables: */ player: "Ivan", activeSlot: undefined, ready: false, }, methods: { handleFunctionCall: function(functionName, event) { this[functionName](event); }, askForName: function() { alert("Name? ..."); }, displayOptions: function() { alert("Displaying Options..."); }, displaySlots: function() { alert("Displaying Slots..."); }, displayExit: function() { alert("Displaying Exit..."); } }, created() { getJSON("../JSON/Components/Screens.json", (data) => { this.screens = data.screens; }); getJSON("../JSON/Components/Overlays.json", (data) => { this.overlays = data.overlays; }); getJSON("../JSON/Data/Difficulties.json", (data) => { this.difficulties = data.difficulties; }); getJSON("../JSON/Data/Audios.json", (data) => { this.music = data.music; this.sounds = data.sounds; }) }, } vueInstance = new Vue(configuration);（（getJSON只是一个JS方法，它解析我的JSON并在解析过程结束后立即执行作为参数发送的函数。）
而且我绝对可以实现，每个按钮组件都在单击时调用了与functionName正确关联的此函数（已通过控制台日志记录进行了检查，但是到了这一点，我得到一个看起来像这样的错误：
[Vue warn]: Error in v-on handler: "TypeError: this[functionName] is not a function" found in ---> <CustomButton> <Overlay> <Screen> <Root> Vue.js:659:25 TypeError: "this[functionName] is not a function" handleFunctionCall http://localhost:8080/Sources/JS/Main.js:56 execute http://localhost:8080/Sources/JS/Components/Button.js:20 VueJS 4 Vue.js:1984:21所以似乎在[]中没有对参数“ functionName”进行求值，而这使得所有这些变得更加怪异的是，如果我只键入this'functionName'（带有我想要的函数名称）电话），它可以正常工作。
我应该做什么？
（（编辑，希望现在更容易理解我的问题...）
谢谢！
我正在为我的大学做一个项目，类似于使用Vue.JS创建的游戏菜单。我创建了一些组件，其中一个是简单的Button组件，它具有一些属性，例如...
我已经使用了您展示的最少的代码来创建一个有效的示例：