V-model属性仅在页面刷新后更新

Question

我有两个复选框。它们的值必须等于监视的计算属性。如果更改了这些属性，我可以在Vue扩展中看到响应性更改，但只有在页面刷新后才能看到新的复选框状态。如果监视的计算属性发生更改，我如何更新我的组件？

以下是我在模板中的内容：

...
<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>

更新:由于这个带有复选框的页面是另一个页面的子页面，下面是我在父页面中的内容：

...
// call an action which will fetch data about the player. 
// This data I will get with `getPlayer` getter in my child page.
created() {
    this.loadPlayer();
  },
methods: {
  ...mapActions(['loadPlayer']),
},
...

Answer 1

我设法解决了这个问题，方法是从父页面中删除一个操作，并将其放在组件的created钩子中。我还将我的数据属性赋值给这个钩子中的getter的值。

created() {
    this.loadPlayer();
    this.emailSending = this.playerEmailSending; // getter's value
    this.phoneSending = this.playerPhoneSending; // getter's value
  },