I'm having trouble with my new code and I can't figure out why it's not working properly. I created a minimum reproducible case to showcase the issue. Interestingly, when the data is set synchronously in the `created()` hook, everything works fine and the article radio button is displayed correctly. However, when I enclose it in a timeout function, the blog option remains selected instead of the article. I am using Vue version 2.6.12.
Although the bug in this particular code has been resolved, it wasn't the root cause of my actual problem since my real code differs from this example. The main issue I'm facing is that the radio button doesn't get checked as expected after the reactive data changes.
<Radio
v-model="type"
identifier="article"
class="pl-3"
label="article"
name="type"
/>
<Radio
v-model="type"
identifier="blog"
class="pl-3"
label="blog"
name="type"
/>
<div>Selected {{ type }}</div>
data() {
return {
type: "blog",
};
},
created() {
setTimeout(function () {
this.type = "article";
console.log(this.type);
}, 800);
},
This scenario is frustrating because a similar piece of code in a different component functions correctly.
UPDATE:
The original code causing issues looks like this:
computed: {
blog() {
return this.$store.getters.BLOG;
},
},
watch: {
blog() {
this.type = (this.blog.info.editorial) ? 'article' : 'blog';
},
created() {
this.$store.dispatch('FETCH_BLOG', { slug: this.slug });
},
Links to relevant source code: