1***@qq.com
1***@qq.com
  • 发布:2019-10-03 16:20
  • 更新:2022-07-28 09:20
  • 阅读:3459

请问动态绑定 v-for 一个数组 然后修改数组内的元素 为什么v-for不更新

分类:uni-app

代码如下:

<template name="multiselect">  
    <view class="multi-wrap column">  
        <view class="title">{{title}}<view v-if="required" class="star">*</view></view>  
        <view class="options row">  
            <view v-for="(item,index) in options" :key="index">  
                <view class="option" :class="this.options[index][2]"   
                @click="selectitem(index)">{{item[1]}}</view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  

    import uniIcons from "@/components/uni-icons/uni-icons.vue"  
    import common from "../common/common.js";  

    export default {  
        name:'multiselect',  

        data() {  
            return {  
                selecteditem:[],  
                cls:"option",  
                currentindex:0,  
                 options:[  
                    ['1','选项一','option'],  
                    ['2','选项二','option'],  
                    ['3','选项三','option'],  
                    ['4','选项四','option'],  
                    ['5','选项五','option'],  
                    ['6','选项六','option'],  
                    ['6','选项六','option'],  
                    ['6','选项六','option'],  
                ],  
            };  
        },  
        methods:{  
            selectitem(index){  
                this.options[index][1] = "123"  
            },  
        },  
        //接收外部传的数据  
        props:{  
            title:{  
                type:String,  
                default:"无标题"  
            },  
            required:{  
                type:Boolean,  
                default:false  
            },  
            data:{  
                type:Array,  
                default:[]  
            }  
        },  

        //根页面的onLoad同义  
        created() {  
            //this.options = this.data;  
        },  

        //计算属性  
        computed:{  

        }  

    }  
</script>  

<style>  
.multi-wrap{  
    display: flex;  
    padding:20upx;  
    font-size:30upx;  
    }  
.multi-wrap .options{flex-wrap: wrap;padding-top:20upx;  
justify-content:flex-start;}  
.multi-wrap .options .option{  
    padding:5upx 10upx;  
    border:solid 1px #4CD964;  
    background: #F1F1F1;  
    text-align: center;  
    border-radius: 3px;  
    margin-top:20upx;  
    margin-right:20upx;  

}  

.multi-wrap .options .active{  
    color:white;  
}  
</style>  

我点击选项的时候 我修改数组的数据 把点击的选项的文件变成123 但我点击后 却没有变化????这是为什么啊?但我向options数组push一个子项 页面却能添加。

2019-10-03 16:20 负责人:无 分享
已邀请:
IT梅

IT梅 - 一个前端开发者

this.options[index][1] = "123"

换成

this.$set(this.options[index],1,'123')

1***@qq.com

1***@qq.com

问题解决了吗?碰到类似的场景,也存在这个问题,电脑上没问题,但安卓端测试就不渲染

c***@qq.com

c***@qq.com

数组修改需要点技巧,这样修改是不可以的,还可以搞一个deep 的watch

要回复问题请先登录注册