Vue 计算属性未使用更新的道具进行更新答案

【问题标题】：Vue computed property not updating with updated propsVue 计算属性未使用更新的道具进行更新
【发布时间】：2018-05-06 19:44:47
【问题描述】：

我不确定为什么在我更新父组件中的数据时我的道具没有更新。我已经在小提琴中尝试过了，它可以工作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/

【问题讨论】：

hmm，我认为你应该修复道具的类型，我不知道它是否会影响任何东西，但尝试一下：vuejs.org/v2/guide/components.html#Prop-Validation
你在mounted for this.gameState 中得到任何值吗？在子组件中？
@user2486 因此，当我在浏览器中执行 console.log(this.gameState) 时，它会显示它有内容，但如果我将 Object.assign({}, this.gameState) 运行到其他内容并记录它，它将为空（如预计在初始化）。问题是它在我的应用程序中没有反应，而它在我的小提琴中似乎工作正常。如有必要，我可以发布更多代码。

标签： vue.js vuejs2

【解决方案1】：

如果您不使用字符串模板，那么您需要使用与您的 camelCase 属性等效的 kebab-case：

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

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

【讨论】：

出于某种原因，这似乎不是问题，因为它在开始时仍然返回一个空数组。更多的是没有正确更新孩子
问题似乎出在计算值上，尽管您的回答对我的部分问题也有效。

【解决方案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      
  }

其实vue在gameState.playerHand更新的时候已经成功通知了计算函数。但是您将计算属性：rows 包装到一个数组中，例如：[cards] 和 [cards.slice(0, mid), cards.slice(mid)]。显然，rows.length 将是 1 或 2。

【讨论】：

【解决方案3】：

我认为这是由于滥用了 computed 属性。将其切换到data 并按预期使用this.$set 更新。如果我要使用computed，则需要设置器。 Computed 似乎也更适合组合/更新 data 属性，而不是其本身的属性。

【讨论】：