更新された小道具でVue計算されたプロパティが更新されない

Question

親コンポーネントのデータを更新すると、私の小道具が更新されない理由がわかりません。私はフィドルでそれを試してみましたが、それはhttps://jsfiddle.net/f3w69rr6/1/で動作しますが、私のアプリでは動作しません。

<PlayerCards :gameState="gameState" :hand="gameState.playerHand" /> 

子：

親：経由子にデータを入れて

methods: { 
    addToHand(index) { 
     let card = this.gameState.playerDeck.splice(index, 1) 
     if (this.gameState.playerHand.length < 12) 
     { 
      // put card into hand 
      this.$set(this.gameState, 'playerHand', [...this.gameState.playerHand, card]) 
      // this.gameState.playerHand.push(card) 
     } 
     // otherwise discard card 
    }, 
    retrieveDeck() { 
     let array = [] 
     for (let i = 0; i < 20; i++) 
     { 
      array.push(this.src + "?text=card"+i) 
     } 
     this.$set(this.gameState, 'playerDeck', array) 
    }, 
}, 
mounted() { 
    this.retrieveDeck() 
    for (let i = 0; i < 5; i++) 
    { 
     this.addToHand(1) 
    } 
}, 

export default { 
    name: 'PlayerCards', 
    props: ["gameState", "hand"], 
    data() { 
     return { 
     } 
    }, 
    computed: { 
     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 
     } 
    } 
} 

が、行の内容は空です。

アップデート（更新フィドル）：

あなたがあなたのcamelCase小道具にkebab-case同等のものを使用する必要があり、文字列のテンプレートを使用していない場合は、問題が計算

https://jsfiddle.net/f3w69rr6/1/

Answer 1

であります：

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

あなたのフィドルで動作する理由は、文字列テンプレート（参照：https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case）jsfiddleであなたのデモで

Answer 2

ルック：gameState.playerHandが更新されたとき

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  
    } 

実は、VUEが正常に計算された機能を通知しました。しかし、計算されたプロパティ：rowsは、[cards]と[cards.slice(0, mid), cards.slice(mid)]のような配列にラップされています。そして、明らかにrows.lengthは1または2になります。

Answer 3

これは、computedプロパティの悪用によるものだと思います。 dataに切り替えて、this.$setのアップデートを期待どおりに使用してください。 computedを使用する場合は、セッターが必要です。 Computedは、それ自身のプロパティではなく、dataのプロパティを結合/更新する方がより適しているようです。