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

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

created

仅在刷新页面后更新V型模型属性

1 个答案: