小程序vue数据变化页面不渲染问题踩得坑

  今天要实现一个大概这样的需求：

意思就是类似一个table的选择数据功能，只不过这个数据就是一个长方形的div框或者是一个折叠面板里面嵌入表单这样的形式。点击某条数据div的背景会变蓝，再点击则取消蓝色，很简单的一个需求对吧。

  于是我的实现思路就是封装一个组件，传入组件一个数组，通过type: normal 或者collapse来区分是普通的div还是折叠面板。

  然后写一个cilck事件来切换class样式来变色。代码如下

<view  class="main-page">   
    <view v-for="(item, index) in formItems" :key="index">     
     <view v-if="item.type==='collapse'">       
     <uni-collapse  @change="changeBgColor(item,index)">          
     <uni-collapse-item :title="item.title">           
     <textarea style="min-height: 50px;font-size: 14px;" class="border-style" :value="formData[item.remarkField]" @input="bindRemark" auto-height :maxlength="item.maxlength" :placeholder="item.placeholder" fixed="true"></textarea>            
    <uploadFile  :count='50' :value="formData[item.uploadField]" @bizIdChange="onItemDataChange($event,item)"></uploadFile>          </uni-collapse-item>        </uni-collapse>      </view>      
<view v-if="item.type==='normal'" :class="[ item.isSelected?'selected-item':'','border-style','normal-card']" @click="changeBgColor(item,index)">        
    <div  style="margin-left: 12px;">{{item.title}}</div>      
</view>    
</view>  
</view>
</template>

然后changeBgColor方法里面直接 item.isSelected = !item.isSelected;

没毛病对吧，h5浏览器跑起来好好地，都好用。

可是编译到钉钉小程序中，就不好用了，也不报错，什么鬼？

于是我debugger输出isSelected 确实变成true了 怎么不变色呢？数据变化了，页面不渲染？为什么？

我试了很多种方法，最后干脆在这个方法里直接把list干掉 formItems = [];试试，报错了

报错信息：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “formItems ”

难道是因为 我这个方法写在了子组件中？所以改变值页面不渲染的？

于是我把这个方法emit出去了，在父组件写了。果然好使了！！

总结：通过props注入子组件的变量不能再子组件中 直接修改不然就有不可预期的错误，要在父组件更改。