Upon running the code below (a Vue.js component), my expectation is that both the v-html directive and the console.log() will display the same value after the AJAX call returns.
To my surprise, while v-html remains stuck at "loading...(1)", the value of obj.html is actually different as confirmed by the console.log().
This unexpected behavior is a result of getObject overwriting obj, leading to obj.html becoming undefined briefly before getHTML finishes executing within the created function.
I would appreciate any insights on whether this behavior aligns with Vue.js standards (links to relevant documentation are welcomed). Alternatively, should I consider filing a bug report, or is it possible that my code structure needs improvement?
Thank you in advance.
<template>
<main v-html="obj.html || 'loading... (1)'">
</main>
</template>
<script>
export default {
name: 'Post',
data: function () {
return {
obj: {
html: 'loading... (2)'
}
}
},
created: async function () {
this.obj = await this.getObject()
this.obj.html = await this.getHtml()
console.log(this.obj.html)
},
methods: {
getObject: async function () {
const resp = await this.$http.get('https://jsonplaceholder.typicode.com/todos')
return resp.body[0]
},
getHtml: async function () {
const resp = await this.$http.get('https://jsonplaceholder.typicode.com/todos')
return resp.body[0].title
},
}
}
</script>