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

【问题标题】：V-model property is updated only after page refreshV-model 属性仅在页面刷新后更新
【发布时间】：2019-04-04 13:26:59
【问题描述】：

我有两个复选框。它们的值必须等于监视的计算属性。如果更改了这些属性，我可以在我的 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']),
},
...

【问题讨论】：

你能展示你设置this.getPlayer.data.emailSending和this.getPlayer.data.phoneSending的vuex的mutator部分吗？我怀疑你可能没有使用vue.set 方法
由于这个带有复选框的模板是页面的子级，我将通过mapActions 的操作放在父级上。我在页面模板中的created 挂钩中调用此操作，然后使用getPlayer getter 在子组件中获取所需的数据。
@OlgaB 我认为问题可能在于您正在计算嵌套对象属性，但这似乎不是问题。我试图在不使用 Vuex here 的情况下重新创建您的问题，但无法解决同样的问题。或许可以按照 Daniel 上面的建议添加一些 Vuex 代码。
更新了问题。难道它不是直接嵌套组件而是一个页面，其路由是另一个页面的子页面吗？
@OlgaB 我认为您的问题可能是因为 Vue 无法检测到属性添加或删除 (documentation)。你把getPlayer得到的数据的初始值设置成什么？

标签： javascript vue.js vuex

【解决方案1】：

我设法通过从父页面中删除一个操作并将其放置在组件的created 挂钩中来解决此问题。我还在这个钩子中将我的数据属性分配给 getter 的值。

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

【讨论】：