我正在使用道具来更新子组件中的网站内容。这基本上是这样的:
<child-component>
:updatedArray="updatedArray"
</child-component>
然后在子组件中:
<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
未被触发且无效。
我可以问你为什么会这样吗? 计算不适用于每个道具更新吗?
我该如何更正我的代码?
编辑:不重复 我不是在改变道具,我只是根据它的值进行计算。
答案 0 :(得分:1)
您的绑定使用了错误的名称。
正如Vue Guide所述:
HTML属性名称不区分大小写,因此浏览器会解释 任何大写字符为小写。这意味着当你使用时 in-DOM模板,camelCased道具名称需要使用他们的kebab-cased (连字符分隔)等价物
所以你需要将 camelCase 转换为 kebab-case 。
与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'
}
}
})
&#13;
<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>
&#13;