I have encountered a situation with two checkboxes that need to reflect the values of watched computed properties. While I can observe reactive changes in my Vue extension when these properties are altered, the updated states of the checkboxes only appear after refreshing the page. How can I ensure that my component reflects changes in watched computed properties without the need for manual intervention?
Below is the snippet of code from the template:
...
<input type="checkbox" v-model="emailSending">
<span class="ml-10 checkbox-label">Email</span>
<input type="checkbox" v-model="phoneSending">
<span class="ml-10 checkbox-label">Sms</span>
...
<script>
data() {
return {
emailSending: true,
phoneSending: true,
};
},
watch: {
playerEmailSending(value) {
this.emailSending = value;
},
playerPhoneSending(value) {
this.phoneSending = value;
},
},
computed: {
...mapGetters(['getPlayerNotifications', 'getPlayer']),
playerEmailSending() {
return this.getPlayer.data.emailSending;
},
playerPhoneSending() {
return this.getPlayer.data.phoneSending;
},
},
methods: {
...mapActions(['loadPlayerNotifications']),
save() {
this.loadPlayerNotifications({
emailSending: this.emailSending,
phoneSending: this.phoneSending,
});
},
},
</script>
UPDATE: Given that this page with checkboxes is nested within another page, here is the implementation in my parent page:
...
// Invoke an action to retrieve player data, which will be accessed using the `getPlayer` getter in the child page.
created() {
this.loadPlayer();
},
methods: {
...mapActions(['loadPlayer']),
},
...