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 
     } 
    } 
} 

하지만 행의 내용이 비어 있습니다.

업데이트 (업데이트 바이올린) :

문제는 컴퓨팅 함께

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

Answer 1

당신이 당신의 camelCase 소품에 동등한 kebab-case를 사용할 필요는 문자열 템플릿을 사용하지 않는 경우 :

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

귀하의 피들에서 작동하는 이유는 문자열 템플릿 (참조 : https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case를) jsfiddle에서 데모에서

Answer 2

봐 :

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  
    } 

gameState.playerHand가 업데이트 될 때 실제로, VUE는 계산 기능을 성공적으로 통보했다. 하지만 rows이라는 계산 된 속성을 배열로 래핑했습니다 (예 : [cards] 및 [cards.slice(0, mid), cards.slice(mid)]). 그리고 분명히 rows.length은 1 또는 2이 될 것입니다.

Answer 3

나는 이것이 computed 속성의 오용으로 인한 것이라고 생각합니다. data으로 전환하고 예상대로 this.$set 업데이트를 사용하십시오. computed을 사용하려면 setters가 필요할 것입니다. Computed는 또한 속성 자체가 아닌 data 속성을 결합/업데이트하는 데 더 적합합니다.