Vue.js 带道具的V型模型&；计算属性

我有一个复选框组件，用于跟踪某个项目是否已被用户保存为收藏夹。此信息作为道具传入

因为我们不能/不应该改变从父组件传入的道具，所以我在计算属性上使用v-model

<template>
  <input class="favorite" type="checkbox" v-model="checked">
</template>
<script>
  module.exports = {
    props: ['favorite'],
    computed: {
      checked: {
        get: function getChecked() {
          return this.favorite;
        },
        set: function setChecked(newVal) {
          this.$emit('update:favorite', newVal);
        }
      }
    }
  };
</script>

module.exports={
道具：[“最爱”]，
计算：{
检查：{
get：函数getChecked（）{
返回这个。收藏；
},
设置：功能设置已检查（newVal）{
此.emit（'update:favorite'，newVal'）；
}
}
}
};

父组件控制向favorites api发送请求，并在请求成功时更新每个实体的状态

<template>
  <input-favorite
    @update:favorite="toggleFavorite" 
    :favorite="entity.favorite"
  ></input-favorite>
</template>
<script>
  module.exports = {
    methods: {
      toggleFavorite: function toggleFavorite(val) {
        if (val) {
          this.$store.dispatch('postFavorite', { id: this.entity.id, name: this.entity.name });
        } else {
          this.$store.dispatch('deleteFavorite', this.entity.id);
        }
      }
    }
  };
</script>

module.exports={
方法：{
toggleFavorite：函数toggleFavorite（val）{
if（val）{
this.$store.dispatch（'postFavorite'，{id:this.entity.id，name:this.entity.name}）；
}否则{
此.store.dispatch（'deleteFavorite'，this.entity.id）；
}
}
}
};

但是，如果请求失败，是否可以首先阻止选中复选框？

this.favorite

和

this.checked

保持同步，但复选框的状态不同步

---

由于数据和道具保持正确，我也很难确定如何触发复选框的重新渲染以使其返回正确状态。

我怀疑问题在于，

收藏夹

从未更改，因此Vue不需要更新。您应该在收到检查值后将其更新为

true

（因此状态一致），然后在请求失败时再次将其更新为

false

Vue.component（'inputFavorite'{
模板：“#输入收藏夹”，
道具：[“最爱”]，
计算：{
检查：{
get：函数getChecked（）{
返回这个。收藏；
},
设置：功能设置已检查（newVal）{
此.emit（'update:favorite'，newVal'）；
}
}
}
});
新Vue({
el:“#应用程序”，
数据：{
实体：{
最爱：假
}
},
方法：{
toggleFavorite：函数toggleFavorite（val）{
if（val）{
控制台日志（“Post”）；
this.entity.favorite=true；
//模拟失败
设置超时（（）=>{
console.log（“失败”）；
this.entity.favorite=false；
}, 250);
}否则{
控制台日志（“删除”）；
}
}
}
});
我怀疑问题在于，
收藏夹
从未更改，因此Vue不需要更新。您应该在收到检查值后将其更新为
true
（因此状态一致），然后在请求失败时再次将其更新为
false


Vue.component（'inputFavorite'{
模板：“#输入收藏夹”，
道具：[“最爱”]，
计算：{
检查：{
get：函数getChecked（）{
返回这个。收藏；
},
设置：功能设置已检查（newVal）{
此.emit（'update:favorite'，newVal'）；
}
}
}
});
新Vue({
el:“#应用程序”，
数据：{
实体：{
最爱：假
}
},
方法：{
toggleFavorite：函数toggleFavorite（val）{
if（val）{
控制台日志（“Post”）；
this.entity.favorite=true；
//模拟失败
设置超时（（）=>{
console.log（“失败”）；
this.entity.favorite=false；
}, 250);
}否则{
控制台日志（“删除”）；
}
}
}
});

注意：组件不接受
实体作为道具，尽管您正在传递它。设置复选框值只需在检测到请求失败时适当地设置entity.favorite即可。在问题中键入，而不是在实际组件中键入。我道歉<代码>实体。收藏夹始终正确。它的开头是
entity.favorite=false
。即使已选中计算的道具
和道具
收藏夹
（从
entity传入。favorite
不更改，复选框已选中，我无法重置它。注意：您的组件不接受
entity
作为道具，尽管您正在传递它。设置复选框值只需在检测到请求失败时适当设置
entity.favorite
。Typo在问题中，而不是在实际组件中。我很抱歉。
entity.favorite
总是正确的。它的开头是
entity.favorite=false
。即使计算的道具
选中了
，道具
favorite
（从<代码>实体传入。收藏夹
不更改，复选框已选中，我无法重置它。