vuejs - 计算不适用于道具 [英] vuejs - computed is not working with props
问题描述
我正在使用 props 更新子组件中的站点内容.这基本上是这样工作的:
然后在子组件中:
{{更新数组}}<div>{{computedArray}}</div></模板><脚本>道具:['updatedArray']，...计算:{计算数组(){if(this.updatedArray.item == "item one") {return "item one"}else {返回其他项目"}}}现在，当我更新父组件中的 updatedArray 时，这段代码应该可以在任何情况下工作.然后我在我的子组件中看到我的 {{updatedArray}} 正在正确更改，但是我的 computedArray 没有被触发并且不起作用.
我能问你为什么会这样吗?计算是否不适用于每次道具更新?
我应该如何更正我的代码?
不重复我没有改变道具，我只是根据它的值进行计算.
您的绑定使用了错误的名称.
作为 Vue 指南 描述:
<块引用>HTML 属性名称不区分大小写，因此浏览器将解释任何大写字符作为小写.这意味着当你使用in-DOM 模板，camelCased 道具名称需要使用它们的 kebab-cased(连字符分隔)等价物
因此您需要将camelCase 转换为kebab-case.
像 v-bind:updated-array 而不是 v-bind:updatedArray.
下面是一个使用 kebab-case 的工作演示.你可以把它改成camelCase，然后你会发现不行.
Vue.component('child', {模板:'<div><span style="background-color:green">{{ updatedArray }}</span><div style="background-color:red">{{computedArray}}</div></div>',道具:['updatedArray']，计算:{计算数组(){if(this.updatedArray.item.length > 0) {return this.updatedArray}else {返回其他项目"}}}})新的 Vue({el: '#app',数据() {返回{测试数组:{'项目':'测试'，'prop1': 'a'}}},方法:{重置数组:函数(){this.testArray['item'] += this.testArray['prop1'] + 'b'}}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="应用程序"><button v-on:click="resetArray()">点击我</button><child v-bind:updated-array="testArray"></child>I'm using props to update my site content in the child component. This is basically working like this:
<child-component :updatedArray="updatedArray" />
then in the 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>
Now this code should work in any case when I update updatedArray in my parent component. Then I see in my child component that my {{updatedArray}} is changing correctly, but my computedArray is not triggered and does not work.
Can I ask you why is this happening? Does computed do not work with every props update?
How should I correct my code?
edit: not duplicate I'm not mutating the prop, I rather only do a computed based on its value.
Your bind uses wrong name.
As Vue Guide describes:
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents
So you need to convert camelCase to kebab-case.
like v-bind:updated-array instead of v-bind:updatedArray.
Below is one working demo using kebab-case. You can change it to camelCase, then you will find not working.
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>
这篇关于vuejs - 计算不适用于道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
