Question

当我更新父组件中的数据时，我不确定为什么我的道具没有更新。我已经在小提琴中尝试了它并且它有效https://jsfiddle.net/f3w69rr6/1/但它在我的应用程序中不起作用。

父：

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

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

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

子：

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

如果您不使用字符串模板，则需要使用与kebab-case道具同等的camelCase：

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

它在您的小提琴中起作用的原因是因为您使用的是字符串模板（请参阅：https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case）

Answer 2

在jsfiddle中查看你的演示：

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则需要setter。计算似乎也更适合于组合/更新data属性，而不是自身属性。

Vue计算属性不使用更新的道具进行更新

3 个答案: