Vue.js Vue计算属性未使用更新的道具更新

当我更新父组件中的数据时，我不确定为什么我的道具没有更新。我已经在小提琴上试过了，它可以工作，但在我的应用程序中不起作用

家长：

方法：{
addToHand（索引）{
让卡片=this.gameState.playerDeck.splice（索引，1）
if（this.gameState.playerHand.length<12）
{
//把卡片放在手中
此.$set（this.gameState，'playerHand'，[…this.gameState.playerHand，card]）
//此.gameState.playerHand.push（卡）
}
//否则弃牌
},
retrieveDeck（）{
让数组=[]
for（设i=0；i<20；i++）
{
array.push（this.src+“？text=card”+i）
}
this.$set（this.gameState，'playerDeck'，数组）
},
},
挂载（）{
this.retrieveDeck（）
for（设i=0；i<5；i++）
{
这是addToHand（1）
}
},

通过以下方式将数据放入子系统：

儿童：

导出默认值{
名称：“玩家卡”，
道具：[“游戏状态”，“手部”]，
数据（）{
返回{
}
},
计算：{
行（）{
让卡片=this.gameState.playerHand
设max=6；
如果（cards.length如果您没有使用字符串模板，那么您需要使用与您的
camelCase
道具等效的
kebab盒
：

<PlayerCards :game-state="gameState" :hand="gameState.playerHand" />



它在您的小提琴中工作的原因是因为您使用的是字符串模板（请参阅：）
在JSFIDLE中查看您的演示：

rows() {
    let cards = this.gameState.playerHand
    let max = 6;
    if (cards.length <= max)
      return [cards]

    var mid = Math.ceil(cards.length / 2);
    let return_value = [cards.slice(0, mid), cards.slice(mid)]
    return return_value      
  }

rows（）{
让卡片=this.gameState.playerHand
设max=6；
如果（cards.length我认为这是由于误用了
computed
属性。将其切换到
data
并使用
this.$set
按预期更新。如果我使用
computed
则需要setter。computed似乎更适合组合/更新
数据
属性，而不是而不是作为一个属性本身。
嗯，我认为你应该修复道具的类型，我不知道它是否会影响任何东西，但尝试一下：你在挂载中为
this.gameState
？在子组件中？@user2486获得了任何值吗？所以当我执行
console.log（this.gameState）时
在浏览器中，它会显示它有内容，但如果我运行一个
对象。将（{}，this.gameState）
分配给其他对象并记录它，它将是空的（正如初始化时预期的那样）。问题是，它在我的应用程序中没有反应，而在我的小提琴中似乎工作正常。如果需要，我可以发布更多代码。出于某种原因，它似乎不是问题，因为它在开始时仍返回空数组。问题更多的是没有正确更新子对象。问题似乎是计算值，尽管您的答案在一个小时内有效我的部分问题也是如此。