代码如下:
<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一个子项 页面却能添加。