Vue.js-onclick事件不启动

Question

我有一个vue-cli项目。

在这个里面，我有一个vue组件myList.vue，它有以下按钮：

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

以下是一个页面截图，其中一个元素上有检查器：https://i.stack.imgur.com/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版：以下是动态生成标记的数据Im：我在控制台上对它进行了屏幕截图，因为我认为由于突出显示和其他内容，这种方式更可读：https://i.stack.imgur.com/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;
});
}
};