从具有唯一 onclick 参数的模板创建按钮的动态列表答案

【问题标题】：Create a dynamic list of buttons from a template with unique onclick parameters从具有唯一 onclick 参数的模板创建按钮的动态列表
【发布时间】：2021-08-30 12:12:34
【问题描述】：

你好仁慈的互联网陌生人！我是一个从 c# 转过来的 js 菜鸟，并且已经为一些真正不应该那么困难的事情苦苦挣扎了好几天。我的意图如标题所述，我的无能代码如下：

function Create_button () {
    let temp = document.getElementsByTagName("template")[0];
    clon = temp.cloneNode;
    clon.onclick = someFunction(someparam);
}

<!DOCTYPE html>
<html>
<body>
<script src="Test3.js"></script>

<button onclick="Create_button()">New</button>

<div id="entry_list">
</div>

<template>
    <button>Alert</button>
</template>

</body>
</html>

【问题讨论】：

标签： javascript html templates button

【解决方案1】：

我很欣赏您开始学习 JavaScript 的雄心。我建议您在此过程中使用现代前端框架，例如 VueJS。如果我正确理解了您的挑战，您希望创建一种方法来动态添加带有自定义处理程序的按钮。您可以在添加的 sn-p 中查看它。祝您在学习 JavaScript 的道路上好运！

参考：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://vuejs.org/v2/guide/events.html

<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">
    {{ message }}
    <div @click="addButton">Add button</div>
    <div v-for="(button, index) in buttonsWithData">
      <button @click="button.handler">{{ button.name }}</button>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        buttonsWithData: [
          {
            name: 'foo',
            value: 42,
            handler: () => { console.log('some handler') }
          }
        ],
        buttons: [
          () => {
            console.log("first");
          },
          () => {
            console.log("second");
          },
          () => {
            console.log("third");
          }
        ]
      },
      computed: {
        buttonCount: function() {
          return this.buttons.length
        }
      },
      methods: {
        addButton: function() {
          this.buttons.push(() => {
            console.log(`button ${this.buttonCount}`)
          })
        }
      }
    });
  </script>
</body>

</html>

【讨论】：

谢谢@phn，这几乎就是我想要的（如果我的问题不清楚，我很抱歉！）。你知道我如何存储一个变量作为按钮本身的参数吗？我有一个数据列表，并希望每个按钮显示某些字符串和数字。非常感谢您的帮助:)
@Rexor4321 不客气，感谢您考虑我的建议。请注意，我提供的 sn-p 依赖于 VueJS（请参阅标题中的脚本标记）。我将在我的回答中的 sn-p 中给出一个更新的示例。
啊，对不起，我想我可以简单地将代码复制到我的编辑器中（当我从这个页面运行它时发现它看起来完全不同）。我将阅读 Vue，看看我是否可以让它在我的项目中工作。再次感谢，祝您有完美的一天！
祝你好运，我希望能帮到你一点。如果它是 HTML 文件，您可以将其复制到标题中：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>，并且您需要复制带有 new Vue 声明的附加脚本，该声明位于正文中的某个位置。注意 Razor 语法（在 AWS.NET 项目中工作时），因为我记得它还使用 {{}} 声明来生成 HTML。