javascript - Vue.js - onclick 事件不触发

Question

我有一个 vue-cli 项目。

在其中，我有一个 vue 组件 myList.vue，它有以下按钮:

<a class='button' v-on:click='changeRecord'>Aendern</a>

以下是页面的屏幕截图，其中检查器位于此类元素上: /image/HN5SD.jpg

changeRecord 事件处理程序是此组件内的自定义方法。 代码如下所示:

export default {

  data () {
    return {
      tableContent: ""
    }
  },
  methods: {
    //...
    //some other code before
    //...
    changeRecord: function(event){
      console.log("clickevent fired!")
    }
  }

}

现在，为什么当我左键单击该元素时事件没有触发？我需要做哪些不同的事情？

编辑: 标记是动态生成的(至少与带有按钮的列表相关的部分)。以下是生成标记的方法:

fetchList: function(){
      var test = store.dispatch(USER_FETCHLIST).then((res) => {
        let tableData = res["data"]
        console.log("all tabledata ",tableData)
        var contents = ""
        var contentsHead = ""
        var contentsBody = ""

        contentsHead = this.createTableHead(tableData[0]) //Only first element is needed here!
        contents = contents + contentsHead + "<tbody>"
        contentsBody = this.createTableBody(tableData)
        contents = contents + contentsBody + "</tbody>"
        this.tableContent = contents;
      })
    },
    createTableHead: function(tableHeadData){
      console.log("all tableHeadData ",tableHeadData)
      var tableHead = "<thead><tr>"
        for (const [keyOuter, valueOuter] of Object.entries(tableHeadData)){
          if(typeof valueOuter !== 'object'){
            tableHead = tableHead + `<td>${keyOuter}</td>`
          }else if(typeof valueOuter === 'object' && valueOuter !== null){
            for (const [keyInner, valueInner] of Object.entries(valueOuter)){
              tableHead = tableHead + `<td>${keyInner}</td>`
            }
          }
        }
      //tableHead = tableHead + ""
      tableHead = tableHead + "<td>Aktion</td></tr></thead>"

      return tableHead
    },
    createTableBody: function(tableData){
      var tableBody = ""
      tableData.forEach((entry) => {
        tableBody = tableBody + "<tr>"
        for (const [keyOuter, valueOuter] of Object.entries(entry)){
          if(typeof valueOuter !== 'object'){
            tableBody = tableBody + `<td name='${keyOuter}'>${valueOuter}</td>`
          }else if(typeof valueOuter === 'object' && valueOuter !== null){
            for (const [keyInner, valueInner] of Object.entries(valueOuter)){
                tableBody = tableBody + `<td name='${keyInner}'>${valueInner}</td>`
            }
          }
        }
        tableBody =  tableBody + "<td><a class='button' v-on:click='changeRecord'>Aendern</a></td>" + "</tr>"

      })

      return tableBody
    }

编辑2: 这是我动态生成标记的数据: 我从控制台截取了它，因为我认为由于突出显示和其他内容，这种方式更具可读性: /image/90ipF.jpg

Answer 1

使用 v-for 的解决方案如下所示:

  <table>
<thead>
  <tr>
    <td>Internal_Key</td>
    <td>description</td>
    <td>description_sysops</td>
    <td>aktion</td>
  </tr>
</thead>
<tbody>
  <tr v-for="table in tabledata" :key="table.Internal_key">
    <td>{{ table.Internal_key }}</td>
    <td>{{ table[Object.getOwnPropertyNames(table)[1]][Object.getOwnPropertyNames(table[Object.getOwnPropertyNames(table)[1]])[0]] }}</td>
    <td>{{ table[Object.getOwnPropertyNames(table)[2]][Object.getOwnPropertyNames(table[Object.getOwnPropertyNames(table)[2]])[0]] }}</td>
    <td>
      <a class="button" @click="changeRecord">Aendern</a>
    </td>
  </tr>
</tbody>

和代码:

export default {
data() {
  return {
    tabledata: []
  };
},
methods: {
  changeRecord: function(event) {
    console.log("clickevent fired!");
  }
},
created() {
  this.$store.dispatch(USER_FETCHLIST).then(res => {

    this.tabledata = res.data;

  });
}
};