Click handler for dynamic inserted content from axios - vuejs2

Question

Im using displayLog function in my vue methods to render logs (in foreach loop) I got from axios.
And i need to bind some handler to my dynamic content, for example changeThisNote.
How can i bind it to my dynamic inserted content?
If I code '#click="changeThisNote' Vue doesn't render it as I need.
Thanks.
methods: {
displayLog: function(log) {
let str = '';
let space = ' ';
let date = log.created_at;...str = '<div class="note" #click="changeThisNote(' + log.id + ')"><div class="note__date">'
+ date + space + name
+ '</div><div class="note__body" id="note_' + log.id + '">' + log.msg + '</div><div></div></div>';
return str;
},
changeThisNote: function(log_id) {
// here I need hide note__body, insert textarea with its data for editing
}
}

Answer 1

You shouldn't be building strings of HTML and inserting them into the DOM. That's missing out on some of the best features of Vue.
What you should do instead is use data to drive your template.
For example, store an array of log data in your component and render that in your template. When your Axios request completes, the template will update automatically
export default {
data: () => ({ logs: [] }),
methods: {
async getLogs () {
const { data } = await axios.get("/logs") // just an example
this.logs = data.map(log => ({
...log,
editing: false // add an "editing" flag
}))
}
}
}
<div
v-for="log in logs"
:key="log.id"
class="note"
#click="log.editing = true"
>
<div class="note__date">
{{ log.created_at }}
{{ log.name }} <!-- 👈 not sure where "name" was meant to come from -->
</div>
<textarea v-if="log.editing" v-model="log.msg"></textarea>
<div v-else class="note__body" :id="`note_${log.id}">
{{ log.msg }}
</div>
</div>

Answer 2

the simplest way would be to create the html element like this:
// ...
methods: {
displayLog (log) {
const div = document.createElement('div')
div.classList.add('note')
div.addEventListener('click', this.changeThisNote(log.id))
div.innerHTML = '<div class="note__date">' + date + space + name + '</div><div class="note__body" id="note_'+log.id+'">' + log.msg + '</div><div></div>'
}
}
// ...