记录一次Vue使用Croppa组件图片不能及时刷新的Bug

起因：

使用插件 Croppa 作为图片组件，遇到BUG，Bug 描述：使用 Croppa 时，发现当图片地址改变时，Croppa 不能及时刷新图片。

问题描述

BUG 图片展示：

（1）点击第一个图编辑

2.点击第二个图片的编辑

发现图片没有及时改变，还是上一次的图片。

排查问题

遇到奇怪的问题就开始DeBug排查问题，DeBug 点击第一个编辑时断点代码显示

点击第二个编辑时断点代码显示

Debug 发现点击第二个编辑时 图片的数据已经改变了。

vue双向绑定，那么图片应该换调才对啊，事实上并没有

croppa 图片上传显示代码

<croppa v-model="articleCover" canvas-color="#fff" :width="200" :height="200" :placeholder="'上传文章封面'" :initial-image="editKolArticle.ciurl" ></croppa>

点击编辑时触发的js代码

selectKolArticle(article) { 
    this.editKolArticle = article; 
    this.kolArticleEditorVisible = true; 
},

点击编辑按钮编辑详情时会调用 selectKolArticle 方法赋值新的数据，由于我们上面端点也可以看出图片数据已经发生改变了，那么唯一可以解释图片没有变化问题就是这个 croppa 组件没有刷新，查看 croppa 官网发现提供了一个 refresh() 方法。

那么代码这么修改

selectKolArticle(article) { 
    //添加刷新方法 让 croppa组件刷新图片articleCover是 croppa用v-model绑定的值
    this.articleCover.refresh();
    this.editKolArticle = article;
    this.kolArticleEditorVisible = true;
},

修改后发现报错，并且对话框不能弹出

其实这时候 this.articleCover 返回值是 null

为什么呢？

因为我们再点击编辑的时候才会创建一个对话框，然后初始化 croppa 组件，也就是说这时候 croppa 没有创建。那么先 this.kolArticleEditorVisible = true; 让对话框先显示再刷新croppa，修改代码如下

selectKolArticle(article) { 
    this.editKolArticle = article; 
    this.kolArticleEditorVisible = true; 
    //添加刷新方法 让 croppa组件刷新图片articleCover是 croppa用v-model绑定的值  
    this.articleCover.refresh(); 
},

修改后发现报错，但是对话框能弹出，而且数据正确了

数据正确展示了，但是还是报错，原因是 当 执行 this.kolArticleEditorVisible = true; 时就是创建对话框，但是可能还没来得及创建 croppa 组件 ，你就是执行 this.articleCover.refresh();刷新组件了，当然会报错。

所以正确写法：

selectKolArticle(article) {
    this.editKolArticle = article; 
    this.kolArticleEditorVisible = true; 
    this.$nextTick(() => { this.articleCover.refresh(); }); 
},