Vue中tab切换，页面如何重新渲染

Vue中tab切换后重新渲染

问题描述

在Vue中有很多查看信息的页面跳转，跳转后使用tabs来展示不同的信息，在修改一个tab中的数据后，切换到另一个，信息无法重新渲染，依然显示的是之前的信息。

解决方法

在对用的组件上加上：key，在每次key绑定的值发生变化时，就会重新渲染页面。

<el-tabs  v-model="activeName">
     <el-tab-pane label="商品价格" name="second" :lazy="true" :key="new Date().getTime()">
    		<goodsPrice :id="id"></goodsPrice >
     </el-tab-pane>
     <el-tab-pane label="超市货物" name="second" :lazy="true">
      		 <marketGoods:id="id"></marketGoods>
     </el-tab-pane>
  </el-tabs>