Question

我有一个vue-cli项目。

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

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

这是该页面的屏幕快照，其中检查器位于一个这样的元素上： https://imgur.com/cnzHgm8

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
    }

EDIT2：这是Im从以下位置动态生成标记的数据：我从控制台截图了它，因为由于突出显示和内容，我认为这种方式更具可读性： https://imgur.com/0cVyKfQ

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;

  });
}
};

Vue.js-onclick事件不会触发

1 个答案: