JSON数据按钮单击在Vuejs中不起作用答案

【问题标题】：JSON data button click is not working in VuejsJSON数据按钮单击在Vuejs中不起作用
【发布时间】：2020-12-19 09:33:32
【问题描述】：

我看到了this 问题，但这里没有显示方法。

"element": [
  {
   "value": "<button @click='changeTheme()' class='theme-link btn btn-light'>Default</button>",
   "class": "text-success"
  }
]

我已将 JSON 数据与 Vue 组件绑定，如下所示：

<p v-else v-html="element[0].value"></p>

现在，我正在尝试调用此方法。但它没有开火！

methods: {
  changeTheme() {
     alert("Y");
  }
}

【问题讨论】：

我看到了问题，但这里没有显示方法。我没有选择将数据保存在数据库中。
只有一种渲染vue组件的方法，检查this但是如果你在这里应用它将无法识别方法，因为方法是在父组件中定义的
我的方法没有办法解决这个问题吗？如果我在 JSON 中使用方法呢？
这很复杂，您可以使用我在上面评论中提到的方法，但您还应该找到一种将事件和数据传递给动态组件的方法

标签： javascript vue.js

【解决方案1】：

也许通过将动作放在不同键上的对象上，并在单击元素时调用它，从而将动作与按钮分开：

"element": [
  {
   "value": "<button class='theme-link btn btn-light'>Default</button>",
   "class": "text-success",
   "action": function () {alert("Y")}
  }
]

<p v-else v-html="element[0].value" @click="element[0].action"></p>

【讨论】：