v-for中循环生成的图片，动态改数组中某一项内容，页面没有刷新，这是怎么回事呢？

Question

问题描述

我在获取图片的时候，默认生成个跟图片一样长的图标的数组，填充默认的图标名字，交select_normal.svg

然后在点击的时候，将点击的那项的图标名字改成选中样式的图标名字（select_select.svg），然后页面没有刷新，想问下诸位大佬这个是什么情况呢？如何解决？

]

相关代码

<!-- html -->
<div>
    <p>首页轮播图</p>
    <div class="allCarouseImgs">
        <div v-for="(item,index) in allCarouseImgsList" :key="index" class="contain-div" @click="clickCarouseImg(index)">
            <img :src="item.url" :id="item.id" />
            <svg-icon :icon-class="allCarouseImgsListStatus[index]" class="select-icon" />
        </div>
    </div>
</div>

// 主要js
clickCarouseImg(index){
    this.allCarouseImgsListStatus[index] = 'select_select';
    console.log(this.allCarouseImgsListStatus)
    console.log(index)
},

Answer 1

  import Vue from 'vue';
// 主要js
clickCarouseImg(index){
    Vue.set(this.allCarouseImgsListStatus, index, 'select_select')
    console.log(this.allCarouseImgsListStatus)
    console.log(index)
},