I have encountered a problem in the development process recently. When writing a click event on a node, the click event will not be executed. The code is as follows:
<!-- operate -->
<el-table-column label="operate">
<template slot-scope="scope">
<span class="poi icon-hover f16 mr20" @click='=!'>
<svg-icon :icon-class="?'icon_edit_outline':'icon_save'"></svg-icon>
</span>
<span class="poi icon-hover f16">
<svg-icon icon-class="icon_delete"></svg-icon>
</span>
</template>
</el-table-column>
<!-- operate -->
The click event here has not been executed. At first, I thought it was because the click event was not written correctly and was looking for the reason. Later, I suddenly thought that it was because the data was out of sync, because the edit field is a field added to it by itself, as follows:
export default {
name: 'strategic',
data() {
return {
tableData: [{
'pp_id': 4,
'brand_name': '1414',
'project_name': 'proud',
'description': 'The u will come back',
'publish_time': '2018-07-23',
'is_used': 0
}]
}
},
components: { },
computed: {
},
created() {
()
},
methods: {
initTableData() {
(element => {
= false
})
}
}
}
After that, I directly added the edit field to the data and found that the data can be synchronized. The code is as follows:
data() {
return {
tableData: [{
'pp_id': 4,
'brand_name': '1414',
'project_name': '1414',
'description': '7588888888',
'publish_time': '2018-07-23',
'is_used': 0,
'edit': false
}]
}
}
It turned out that we were developing using vue. When we generated the vue example and assign the data again, it sometimes cannot be automatically updated to the data. At this time, we have to solve this problem through $set. The solution code is as follows:
initTableData() {
(element => {
this.$set(element, 'edit', false)
})
}
It's solved at this point.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.