同一个组件挂载多次后数据会串。
因为怀疑是在组件注入state造成问题,我把state数据通过props传入问题还是存在:<RatePanel v-bind="..." />
下面是问题组件的大概情况
// 页面
<div v-for="item in boxList" :key="item.id">
<RatePanel v-bind="item" />
</div>
// RatePanel 组件
<SpotBox
v-if="productType === 'SPOT'"
:key="id"
v-bind="$props"
v-on="$listeners"
/>
<FwdBox
v-if="productType === 'FWD'"
:key="id"
v-bind="$props"
v-on="$listeners"
/>
export default {
name: 'RatePanel',
props: {
id: String,
productType: String
}
}
// SpotBox、FwdBox 组件
<a-row v-for="(item, index) in pricelist" :key="index">
{{ item.price }}
</a-row>
export default {
name: 'SpotBox', //name: 'FwdBox',
props: {
id: String,
},
computed: {
...mapState('spotModule', [
'spotMessage',
]),
},
watch: {
'spotMessage': {
handler(message) {
if (message.panelId === this.id) {
this.pricelist = message//一些筛选....
}
}
}
}
}
组件bug展示:
(左边的正确数字应该位30.xxxx,右边正确数字应该为1.xxxx)
</template>
// 问题出在这,这里声明的变量在组件挂载多次的时候是共享的!!!!!
const tenorKeyMap = new Map();
<script>
export default {
watch: {
...
tenorKeyMap.set(KEY, DATA)
...
}
}