image.png
在项目中，我设置了一个数组对象loadingFlag，当我图片上传成功之后，我会让其设置为true,此时理想情况下，应该是vue检测到loadingFlag数组发生变化，其view界面应该会随时发生刷新，但实际却是直接给loadingFlag设值( self.loadingFlag[1] = true; )，会发现页面不会实时刷新。而后百度搜索，解决的方法，vue有专门的修改数组方法.$set( )，如self.$set(self.loadingFlag,0,true)。
data(){
return{
loadingFlag:[
false,
false,
]
}
},
<ul class="picsList">
<li>
<div class="img"><input @change="upImg(1)" ref="forehead" type="file" accept="image/*" mutiple="mutiple">
<img v-if="forehead" :src="forehead" alt=""><div class="loadingBg" v-show="loadingFlag[0]"><img :src="loading" alt="加载图片..." class="loadingImg"></div></div>
<p>额头</p>
</li>
<li>
<div class="img"><input @change="upImg(2)" ref="leftCheek" type="file" accept="image/*" mutiple="mutiple">
<img v-if="leftCheek" :src="leftCheek" alt=""><div class="loadingBg" v-show="loadingFlag[1]"><img :src="loading" alt="加载图片..." class="loadingImg"></div></div>
<p>左脸颊</p>
</li>
</ul>
upImg: function (index) {
var inputDOM;
var self = this;
if( index == 1){
self.$set(self.loadingFlag,0,true); ==>有效
// self.loadingFlag[0] = true; ==>无效
inputDOM = this.$refs.forehead;
}else if(index == 2){
self.$set(self.loadingFlag,1,true); ==>有效
// self.loadingFlag[1] = true; ==>无效
inputDOM = this.$refs.leftCheek;
}
},
