vuejs - 计算不能与 props 一起使用

我正在使用 props 来更新子组件中的网站内容。这基本上是这样工作的：

<child-component :updatedArray="updatedArray" />

然后在子组件中：

<template>
   {{updatedArray}}
   <div>{{computedArray}}</div>
</template>
<script>
   props: ['updatedArray'],
   ...
   computed: {
      computedArray() {
        if(this.updatedArray.item == "item one") {return "item one"}
       else {return "other item"}
       }
   }
</script>

现在，当我更新时，这段代码应该在任何情况下都可以工作updatedArray在我的父组件中。然后我在我的子组件中看到我的{{updatedArray}}正在正确更改，但是我的computedArray没有被触发并且不起作用。

我可以问你为什么会发生这种情况吗？ 计算是否不适用于每个道具更新？

我应该如何更正我的代码？

编辑：不重复 我不会改变 prop，我只是根据它的值进行计算。

您的绑定使用了错误的名称。

As Vue指南 https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case描述：

HTML 属性名称不区分大小写，因此浏览器会解释 任何大写字符都视为小写。这意味着当你使用 在 DOM 模板中，camelCased prop 名称需要使用其 kebab-cased （连字符分隔）等价物

所以你需要转换骆驼香烟盒 to 烤肉串盒.

like v-bind:updated-array代替v-bind:updatedArray.

下面是一个使用 kebab-case 的工作演示。你可以把它改成camelCase，然后你会发现不起作用。

Vue.component('child', {

  template: '<div><span style="background-color:green">{{ updatedArray }}</span><div style="background-color:red">{{computedArray}}</div></div>',
  props: ['updatedArray'],
  computed: {
    computedArray() {
      if(this.updatedArray.item.length > 0) {return this.updatedArray}
      else {return "other item"}
    }
  }
})

new Vue({
  el: '#app',
  data() {
    return {testArray: {
      'item': 'test',
      'prop1': 'a'
    }}
  },
  methods:{
    resetArray: function() {
      this.testArray['item'] += this.testArray['prop1'] + 'b'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button v-on:click="resetArray()">Click me</button>
<child v-bind:updated-array="testArray"></child>
</div>