vue中点击列表数据展开收起,利用v-for 渲染,先把状态值存储起来

![点击收起展开,只有一个能展开,其他都收起]

**html**
<div class="help-info">
    <ul>
        <li class="help-list" v-for="(item, index) in help" :key="item.id" @click="helpShow(index)">
            <span class="circle"></span>
            <span class="name font-14 font-darkGray">{{ item.title }}</span>

            <span v-if="item.helpFlag" class="arrows arrows2"></span>
            <span v-else class="arrows arrows1"></span>

            <div class="help-list-info font-grey"  v-if="item.helpFlag">
                <p class="font-12 font-grey item-content">
                    {{ item.content }}
                </p>
                <div class="ifHelp font-12">
                    <p class="helpful" :class="{'helpful-active': item.helpful }" 
                        <span class="bg-contain"></span>有帮助的
                    </p>
                    <p class="no-helpful" :class="{'no-helpful-active': item.nohelpful }" 
                        <span class="bg-contain"></span>没帮助,去反馈
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>
**js**
getData () {
    var that = this
    if (that.problemState == 1) {
        that.helpType = 2
        that.helpShowNum=null
    } else {
        that.helpType = 1
        that.helpShowNum=null
    }
    network(CONFIG.help, {'type': that.helpType}).then((res) => {
        if (res.head.code == 0) {
            var help = res.details.questions  // 先用一个变量接收对象
            help.forEach((item)=>{
                item.helpful = false
                item.nohelpful = false
                item.helpFlag = false   // 给一个对象赋值一个属性
                })
            that.help = help    // 把变量赋值给全局变量
        }
    })
},
// 展开收起
helpShow (index) {
    var that = this
    var listData = that.help 
    var helpFlag = that.help[index].helpFlag // 先用一个变量接收一个原来的状态值
    listData.forEach((item) => {  //循环已经把所有的状态值清空了
        item.helpFlag = false
    })
    //(比如我当前点击的这个是打开的状态,他是true,点击的方法开始先把这个true存下来,然后接下来的循环是把所有的状态值设为false,如果你不存下来的话,你    !状态值永远为true)
    listData[index].helpFlag = !helpFlag
    that.help = listData
},
// 有帮助的和没帮助的
ifHelp (state, id, index) {
    console.log('state', state)
    console.log('id', id)
    var that = this

    that.askData.questionId = id
    that.askData.helpState = state
    console.log('askData', that.askData)
    network(CONFIG.ruleCountTools, that.askData).then((res) => {
        if (state == 1) {
            Vue.toast('感谢您的反馈',{duration:1500})
            that.help[index].helpful=true
            that.help[index].nohelpful=false
        }else if (state == 0) {
            that.help[index].helpful=false
            that.help[index].nohelpful=true
            location.href = "#/self/suggestion"
        }
    })

},
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值