页面如下:
我想要的效果:
点到谁,谁换图标
HTML:
`<div v-for="(item,index) in formData" @click="player(index)">
<img src="@/components/voice/icon/pause.png" v-if="item.click">
<img src="@/components/voice/icon/play.png" v-else>
</div>`
JS:
`//一开始在mounted执行这个方法
list:function(){
//假设这里是从后端请求数据
this.formData = [
{
id:1,
url:'1.mp4'
},
{
id:2,
url:'2.mp4'
},
{
id:3,
url:'3.mp4'
},
];
//拼接一个字段
this.formData.map(o=>{
o.click = false;
})
},
player:function(n){
this.formData[n].click = true;
}`
问题:
为什么我点击后不生效的,也不更换图片?另外,这是我想到的一种思路,还有更好的思路吗?
click需要先在data中定义,要么后面改变click的值时用$set方法,具体的可以去看下vue官网set那一节