uniapp,v-for生成的列表,如何动态更新样式?

uniapp,v-for生成的列表,如何动态更新样式?

题目描述

我使用的是uniapp,想要实现点击v-for生成的某个列表项之后,改变该列表项中icon的颜色(或icon类型)
但是试了两种方法都不奏效
第一种不知道是什么原因,点击后inWatch的值改变了,但是样式并没有变
使用第二种方法时,我不知道该怎样获取到被点击元素下的icon子元素,firstElementChild并不被支持

相关代码

<view v-if="allPairList.length > 0" v-for="(pair,index) in allPairList" :key="index" class="item">  

<view class="row1">

<button type="" :data-index="index" @click="switch($event,pair.inWatch)">

<uni-icons type="star-filled" :class="{active: pair.inWatch}" :color="pair.inWatch?'#ffaa00':'#999'" size="25" />

</button>

</view>

</view>

<script>

data(){

return{

allPairList :[{

name: '123',

inWatch : false

}]

}

}

methods:{

switch(e, inWatch){

let elIndex = e.currentTarget.dataset.index

this.allPairList[elIndex].inWatch = ! this.allPairList[elIndex].inWatch // 用这种方法可以改变inWatch属性的值,但icon的样式没变

e.currentTarget.firstElementChild.color = '#7e2c3a' // 改用这种方法会报错,firstElementChild无法获取到uni-icon这个元素

console.log('点击了第'+elIndex+'个,pair = '+ this.allPairList[elIndex].inWathc)

}

}

</script>


回答:

vue环境中,更改 data,但是视图没有更新,那说明你是直接更改了 data 中数组或者对象的属性。解决方法是深拷贝赋值或者用 this.$set

还有你这用了vue,还用 data-xxx,代码质量有待提高。

<template

v-if="allPairList.length"

v-for="(pair, index) in allPairList"

:key="index"

class="item"

>

<template class="row1">

<button @click="switch(index, pair.inWatch)">

<uni-icons

type="star-filled"

:class="{ active: pair.inWatch }"

:color="pair.inWatch ? '#ffaa00' : '#999'"

size="25"

/>

</button>

</template>

</template>

<script>

export default {

data() {

return {

allPairList: [

{

name: '123',

inWatch: false

}

]

}

},

methods: {

switch(index, inWatch) {

this.allPairList[index].inWatch = !this.allPairList[index].inWatch

// $set

this.$set(this.allPairList, index, this.allPairList[index])

// or

// this.allPairList = Object.assign([], this.allPairList)

}

}

}

</script>

以上是 uniapp,v-for生成的列表,如何动态更新样式? 的全部内容, 来源链接: utcz.com/p/935703.html

回到顶部